• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 267
  • 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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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