Question

I have a div element on my web page with ID “map” with a link to Google inside of it.

<div id="map">
    <a href="http://google.com">Google</a>
</div>

I want to use jQuery to generate a paragraph after the link with an ID of “blurb,” so the HTML akin to what the Javascript produces is

<div id="map">
    <a href="http://google.com">Google</a>
    <p id="blurb"></p>
</div> 

I have been experimenting with

$('#map').append('p').attr('id', 'blurb');

to no avail.

I am open to a Javascript, but non-jQuery way to do this as well. Thank you!

Answer 1

This should work:

$('#map').append('<p id="blurb"></p>');

Your method was the right general idea, but was just appending the text ‘p’ rather than the tag <p> and the id wasn’t getting set on the right object because of the way jQuery chaining works for .append().

If you wanted to assign the id programmatically for some reason, then it’s probably easier to do that this way:

$('<p>').attr('id', 'blurb').appendTo('#map');