www.webdeveloper.com
Results 1 to 3 of 3

Thread: Can you load content for a DOM node from a file?

  1. #1
    Join Date
    Feb 2011
    Posts
    81

    Can you load content for a DOM node from a file?

    Suppose you create the following divs node:
    Code:
        var divs= document.createElement('div');
        divs.setAttribute('id', 'info');
        divs.setAttribute('width', '300');
        divs.setAttribute('height', '200');
    You can not load its content with

    divs.setAttribute('src', 'apage.html');

    How can you load its content from file apage.html at the same folder?

    apage.html has the following content:
    Code:
            <img src="img/squirrel.jpg" alt="" /> 
           <h2>Maps are awesome</h2>
            <p>A wnderful squrrel is looking for food</p>
            <p><a href="http://www.google.com">A sample link</a></p>
    You can define your apage.html, not have to be the above content.
    Thanks,

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,681
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <script type="text/javascript">
    /*<![CDATA[*/
    function ajax(o,url){
      var oop=this,html=false;
      if (window.ActiveXObject){
       try {
        html=new ActiveXObject("Msxml2.XMLHTTP");
       }
       catch (e){
        try {
         html=new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e){
        }
       }
      }
      else if (window.XMLHttpRequest){
       html=new XMLHttpRequest();
      }
      else {
       return false;
      }
      html.onreadystatechange=function(){ ajaxpopulate(o,html); }
      html.open('GET',url+'?'+new Date().getTime(),true);
      try {
       html.send(null);
      }
      catch (e){
      }
     }
    
     function ajaxpopulate(o,html){
      if (html.readyState==4&&(html.status==200||window.location.href.indexOf("http")==-1)){
       o.innerHTML=html.responseText;
    
      }
     }
    
    
    
        var divs= document.createElement('div');
        divs.setAttribute('id', 'info');
        divs.style.width='300px';
        divs.style.height='200px';
        document.body.appendChild(divs);
    ajax(divs,'140818A.txt');
    /*]]>*/
    </script>
    </body>
    
    </html>
    140818A.txt
    Code:
            <img src="img/squirrel.jpg" alt="" />
           <h2>Maps are awesome</h2>
            <p>A wnderful squrrel is looking for food</p>
            <p><a href="http://www.google.com">A sample link</a></p>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Feb 2011
    Posts
    81
    Thanks a lot, vwphillips, it works perfectly!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles