PDA

View Full Version : HTML string to dom element



JasonDFR
07-26-2009, 10:06 AM
Is it possible to convert an HTML string to DOM elements prior to inserting them into the DOM?

For example, if I receive the following HTML string from an ajax response

<div class="someclass">
<div><p>text</p></div>
</div>

<div class="someclass">
<div><p>text</p></div>
</div>

I would like to convert each <div class="someclass"> to a dom element prior to updating the div that contains other elements like this.

Thanks

rainarts
07-27-2009, 12:45 AM
Hi Jason,

Saying that we have the same string response from AJAX, then you could try the code below to get those elements with the class of your choice, by using a Regular Expression to strip down its responseText.

Here's the code for the testpage:


<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style type="text/css" media="screen">
/* <![CDATA[ */
.someclass {
background-color : #eee;
padding : 1em;
border : 1px solid #405060;
margin-bottom : .500em; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var xmlDoc;
var filePath = "test.txt";
var sendRequest = ( function( url ) {
var url = null || url;
xmlDoc = 0;
try {
if ( "XMLHttpRequest" in window ) {
xmlDoc = new XMLHttpRequest();
} else if ( "ActiveXObject" in window ) {
try {
xmlDoc = new ActiveXObject("MSXML2.XMLHTTP");
} catch( e0 ) {
xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
}
} else { xmlDoc = 0; }
} catch( e ) {
xmlDoc = (( "createRequest" in window ) ? window.createRequest() : 0 );
} if ( xmlDoc ) {
(( "overrideMimeType" in xmlDoc ) ? xmlDoc.overrideMimeType("text/xml") : xmlDoc );
xmlDoc.onreadystatechange = ( function() {
var xml = this;
var xDoc = xml.responseText;
var xDiv = xDoc.match(/(<)[\w\s="]+someclass["\s\w]+(>)?/ig);
var xBody = (( document.body ) ? document.body : document.getElementsByTagName("body")[ 0 ] );
if ( { 4 : "complete", complete : 4 }[ xml.readyState ] ) {
for ( var x = 0; !!xDiv[ x ]; ++x ) {
if ( typeof( xDiv[ x ] ) === "undefined" ) {
break;
}
var div = document.createElement( "div" );
div.className = "someclass";
fragments = (( "createDocumentFragment" in document ) ? document.createDocumentFragment().appendChild( div ) : div );
xBody.appendChild( fragments );

}
}
} );
xmlDoc.open( "GET", url, true );
xmlDoc.send( null );
return;
} alert( "Your browser does not handle AJAX request!" );
} )( filePath );
// ]]>
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>

and here's the content of the test.txt i've used a flat file to simulate this demo:


<div id="main" class="someclass"><p>Text</p></div>
<div class="anotherclass"></div>
<div class="someclass"></div>
<div class="anotherclass"></div>
<div class="someclass"></div>
<div class="anotherclass"></div>
<div class="someclass"></div>

hope it helps...