Question

I have one html structure , somethinh like

 <div>

    <div id="mydiv">
        <h3>
        This is a Test Page
        </h3>
        <div>I am inside a div</div>
        <a href="http://www.google.com">Click me</a>  
        <div>Second div</div>     
    </div>
</div>

and one script:

 $(function () {
        var elm = document.getElementById("mydiv").innerHTML;// can use html()of jquery
        alert(elm);
    });

Now elm prints/alerts below code:

  <h3>
        This is a Test Page
        </h3>
        <div>I am inside a div</div>
        <a href="http://www.google.com">Click me</a>  
        <div>Second div</div>  

now my question is what are the ways to get value/access “h3″/”a”

tags from var elm.
Note: I want to use elm.[I know this can easily be done by

 $("#mydiv h3")]

so just want to use var elm….the sln can be both in jQuery/javascript.

Answer 1

Trying to search for the h3 or anchor inside your html string isn’t going to work (like the other solutions suggested). You need to change your code so you get the “mydiv” element as a jQuery object and then search inside of it:

var elm = $('#mydiv');
alert(elm.html());
alert(elm.find('h3').text());

Updated

If you really want to load the html in the string and parse it you can do something like the following:

$(function () {
    // This is just a plain string of HTML now
    var html = document.getElementById("mydiv").innerHTML;

    // Add it to a hidden DOM element
    var hidden = $("<div/>").hide().appendTo("body");

    // Add the html, replacing the duplicate ID
    hidden.append(html.replace(/mydiv/, "mydiv2"));

    // Get the values
    alert(hidden.find("h3").text());
    alert(hidden.find("a").text());

    // Destroy holder
    hidden.remove();
});