How to solve this using jQuery

Question

Hi All, 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"&gt;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"&gt;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

$(elm).find("h3")

Answer 2

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();
});

Answer 3

The solution is:

 $(function () {
        var elm = document.getElementById("mydiv");
        alert($(elm).find('h3').text());
    });

I think you wrote

var elm = document.getElementById("mydiv").innerHTML;

See here for a running example.

Answer 4

Vincent and Lance McNearney's answers show how to solve your problem. To answer your exact question, no you cannot get access to "h3"/"a" from your elm element the way you want to. elm is a string based on the html of your and has no ties to the DOM anymore. You could parse it to find the value of the h3 tag (not too elegantly), but you could not tie that tag to the real tag existing in the DOM.