• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 273
  • Last Modified:

jQuery: Change html of element added with append()

Using jQuery, how can I add text to an element I add using append?

Can this be done with one line?

In the example below, the text is NOT added to the paragraph that is created with append()

<html>
<head>
<title>Hello</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
  $('div').append('<p />').html('This text should in inside the p with a red background');
});
</script>


<style type="text/css">

div {
margin: 50px auto;
padding: 30px;
border: 1px solid #000;
background: #aaaaff;
width: 500px;
}

p {
width: 200px;
background: #ffaaaa;
margin: 50px auto;
padding: 30px;
border: 1px solid red;
}



</style>

</head>
<body>

<div></div>

</body>
</html>

Open in new window

0
hankknight
Asked:
hankknight
  • 2
1 Solution
 
maeltarCommented:
Line 8 should read :

$('div').append('<p>This text should in inside the p with a red background</p>');

Open in new window


Example : http://sdparkes.co.uk/ee_ex/jquery_append.php
0
 
maeltarCommented:
Have just changed the page slightly so you can click the button to see the append happen...
0
 
leakim971PluritechnicianCommented:
another one :
$('div').append(  $('<p />').html('This text should in inside the p with a red background')  );

Open in new window

or
$('div').append('<p />').children("p:last").html('This text should in inside the p with a red background');
¿

Open in new window


because : $('div').append('<p />')
return a ref on the div and not on the p
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now