Advanced Search

Results 1 to 2 of 2

Thread: HTML string to dom element

  1. #1
    Join Date
    Apr 2008
    Location
    Limoges, France
    Posts
    395
    Thanks
    13
    Thanked 61 Times in 61 Posts

    Default HTML string to dom element

    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

  2. #2
    Join Date
    Jul 2008
    Posts
    40
    Thanks
    1
    Thanked 4 Times in 4 Posts

    Default

    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:

    Code:
    <?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:

    Code:
    <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...

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •