CODEWITHSUNDEEP
jquery
techlead
techlead

Reputation: 779

jquery - dynamic element not being created

I am trying to add another <a> element after <a id='link1'>

<html>
    <head>
        <script src="js/jquery-1.6.4.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var myHTML = "<div id='test'>";
                myHTML += "<span><a id='link1'>link 1</a></span>";
                $("a#link1").after("<a id='link2'>link 2</a>");
                myHTML += "</div>";
                $("div#insertHere").html(myHTML);
            });
        </script>
    </head>
    <body>
        <div id="insertHere">

        </div>
    </body>
</html>

The output of the above should be

<body>
   <div id="insertHere">
      <div id="test">
         <span>
            <a id="link1">link 1</a>
            <a id="link2">link 2</a>
         </span>
      </div>
   </div>
</body>

Upvotes: 1

Views: 81

Answers (3)

Pluckerpluck
Pluckerpluck

Reputation: 731

An alternate method to add html to a div that already exists is to use

$("div#insertHere").append(someHML);

each time this is called more code will be added to the element.

Try to reduce DOM manipulation (store as much HTML as possible before appending) so as to reduce load times.

Example:

$("div#insertHere").append("<div id='test'></div>");
$("div#test").append("<span><a id='link1'>link 1</a></span>");
$("div#test").append("<span><a id='link2'>link 2</a></span>");

Upvotes: 1

Didier Ghys
Didier Ghys

Reputation: 30666

You are trying to query elements you haven't added to the DOM yet.
When you do $("a#link1") it does not retrieve any element because the HTML you "generated" before is not in the DOM yet, it's still just text in your variable myHTML.

Generate all the markup and apply it at once:

$(document).ready(function () {
    var myHTML = "<div id='test'>";
    myHTML += "<a id='link1'>link 1</a>";
    myHTML += "<a id='link2'>link 2</a>";
    myHTML += "</div>";
    $("div#insertHere").html(myHTML);
});

If you need to bind events (or else) to the elements you are adding, you can use the dom manipualtion API from jquery:

$(document).ready(function () {
    var $div = $('<div id="test">').addClass('myClass');

    $('<a id="link1">link 1</a>').click(function() { }).appendTo($div);
    $('<a id="link2">link 2</a>').appendTo($div);

    $("div#insertHere").append($div);
});

Further reading:

Upvotes: 1

ShankarSangoli
ShankarSangoli

Reputation: 69905

In your markup insertHere div is empty I don't see any existing anchor with id link1. I think you are looking for this.

    $(document).ready(function () {
            var myHTML = "<div id='test'>";
            myHTML += "<a id='link1'>link 1</a>";
            myHTML += "<a id='link2'>link 2</a>";
            myHTML += "</div>";
            $("#insertHere").html(myHTML);
     });

You can use after to insert element after the element on which you called after method.

Upvotes: 1

Related Questions