get specific div content from responseText and save source code into a database

Question

I'm trying to get a specific div content including all the elements of another page from responseText

the body of the html file looks like this:

<div id="div_1">
    <div><h1> Title 1 </h1></div>
    <div><img src="blah1.jpg" /></div>
    <div><p> Lorem Ipsum </p></div>
</div>
<div id="div_2">
    <div><h1> Title 2 </h1></div>
    <div><img src="blah2.jpg" /></div>
    <div><p> Lorem Ipsum </p></div>
</div>

here is my function to get the source code of the entire html page:

function getSourceCode() {
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            var source_code = xmlhttp.responseText;
            alert(source_code);
        }
    }
    xmlhttp.open("GET","test.html",true);
    xmlhttp.send(); 
}

my question now is how to get only the source code for the "div_1" element. I want to save this source code into a database. I tried to use getElementbyId("div_1") but it didn't work.

Answer 1

Try to .filter() out the required element and get its innerHtml by using .html(),

$(source_code).filter('#div_1').html()