SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict Robert_2006's Avatar
    Join Date
    Jun 2006
    Location
    Tarpon Springs Fl.
    Posts
    265
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating Nested Divs in DOM

    While this is simple in php trying to do it in JS is not the same.

    PHP Code:
           $i=0;
     foreach(
    $xml as $newsitem)
      {
        
    $title          $newsitem->Title;
        
    $summary        $newsitem->Summary;
        
    $url            $newsitem->Url;
        
    $clickurl       $newsitem->ClickUrl;
        
    $newssource     $newsitem->NewsSource;
        
    $newssourceurl  $newsitem->NewsSourceUrl;
        
    $language       $newsitem->Language;
        
    $published_date $newsitem->PublishDate;


        echo
    '<div id="newsitem_'.$i.'" class="newsitem" >

                <input id="newsitemcheck_'
    .$i.'" name="newsitemcheck_'.$i.'" type="checkbox" value="ON" onClick="addMe(this.id)"> Import

                <div class="newsitemtitle" id="newsitemtitle_'
    .$i.'" >'.$title.'</div>

                <div class="newsitemsummary" id="newsitemsummary_'
    .$i.'">'.$summary.'</div>

                <div class="newsitemurl" id="newsitemurl_'
    .$i.'">'.$url.'</div>

                <div class="newsitemclickurl" id="newsitemclickurl_'
    .$i.'"><a href="'.$clickurl.'" target="_blank">Read Article</a></div>

                <div class="newsitemsource" id="newssource_'
    .$i.'">'.$newssource.'</div>

                <div class="newsitemsourceurl" id="newssourceurl_'
    .$i.'">'.$newssourceurl.'</div>

                <div class="newsitemlanguage" id="newsitemlanguage_'
    .$i.'">'.$language.'</div>

                <div class="newsitempublisheddate" id="newsitempublisheddate_'
    .$i.'">Published on '.Nice_Date_Time((int)$published_date).'</div>



            </div>'
    ;
       
    $i++;
      } 
    See, makes a nice wrapper around the other divs. However while trying to do it via JS I end up with the divs just laying on top of one another.

    Code JavaScript:
         for(var i in obj.Results) {
          var Result = obj.Results[i];
     
          //alert(Result.Title + '\n\n' + Result.Summary);
     
      // set the parent container
      var ni = document.getElementById('output');
     
      // start a counter
      var num = i;
     
      //create a new container div
      var newdiv = document.createElement('div');
      // create other divs
      var newdivnewsitemtitle = document.createElement('div');
      var newdivnewsitemsummary = document.createElement('div');
      var newdivnewsitemurl = document.createElement('div');
      var newdivnewsitemclickurl = document.createElement('div');
      var newdivnewsitemsource = document.createElement('div');
      var newdivnewsitemsourceurl = document.createElement('div');
      var newdivnewsitemlanguage = document.createElement('div');
      var newdivnewsitempublisheddate = document.createElement('div');
      var chkdiv9 = document.createElement('input');
     
     
     
     
     
      //create an id for the div
      var divIdName = 'newsitem_'+num;
      // create other names
      var divIdNamenewsitemtitle = 'newsitem_'+num;
      var divIdNamenewsitemsummary = 'newsitem_'+num;
      var divIdNamenewsitemurl = 'newsitem_'+num;
      var divIdNamenewsitemclickurl = 'newsitem_'+num;
      var divIdNamenewsitemsource = 'newsitem_'+num;
      var divIdNamenewsitemsourceurl = 'newsitem_'+num;
      var divIdNamenewsitemlanguage = 'newsitem_'+num;
      var divIdNamenewsitempublisheddate = 'newsitem_'+num;
      var chkIdName9 = 'newsitem_'+num;
     
      // class name for div
      var classname ='newsitem';
     
      var class1 ='newsitemtitle';
      var class2 ='newsitemsummary';
      var class3 ='newsitemurl';
      var class4 ='newsitemclickurl';
      var class5 ='newsitemsource';
      var class6 ='newsitemsourceurl';
      var class7 ='newsitemlanguage';
      var class8 ='newsitempublisheddate';
      var class9 ='newsitemchk';
     
      // set the id for the div
      newdiv.setAttribute('id',divIdName);
     
      newdivnewsitemtitle.setAttribute('id',divIdNamenewsitemtitle);
      newdivnewsitemsummary.setAttribute('id',divIdNamenewsitemsummary);
      newdivnewsitemurl.setAttribute('id',divIdNamenewsitemurl);
      newdivnewsitemclickurl.setAttribute('id',divIdNamenewsitemclickurl);
      newdivnewsitemsource.setAttribute('id',divIdNamenewsitemsource);
      newdivnewsitemsourceurl.setAttribute('id',divIdNamenewsitemsourceurl);
      newdivnewsitemlanguage.setAttribute('id',divIdNamenewsitemlanguage);
      newdivnewsitempublisheddate.setAttribute('id',divIdNamenewsitempublisheddate);
      chkdiv9.setAttribute('id',chkIdName9);
      chkdiv9.setAttribute('type','checkbox');
     
     
      // set the class name
      newdiv.setAttribute('class',classname);
     
      newdivnewsitemtitle.setAttribute('class',class1);
      newdivnewsitemsummary.setAttribute('class',class2);
      newdivnewsitemurl.setAttribute('class',class3);
      newdivnewsitemclickurl.setAttribute('class',class4);
      newdivnewsitemsource.setAttribute('class',class5);
      newdivnewsitemsourceurl.setAttribute('class',class6);
      newdivnewsitemlanguage.setAttribute('class',class7);
      newdivnewsitempublisheddate.setAttribute('class',class8);
      chkdiv9.setAttribute('class',class9);
     
      //insert the data
      newdiv.innerHTML = Result.Title + '\n\n' + Result.Summary;
     
     newdivnewsitemtitle.innerHTML = Result.Title;
     newdivnewsitemsummary.innerHTML = Result.Summary;
     newdivnewsitemurl.innerHTML = Result.URL;
     newdivnewsitemclickurl.innerHTML = Result.ClickURL;
     newdivnewsitemsource.innerHTML = Result.Source;
     newdivnewsitemsourceurl.innerHTML = Result.SourceUrl;
     newdivnewsitemlanguage.innerHTML = Result.Language;
     newdivnewsitempublisheddate.innerHTML = Result.PublishDate;
     //chkdiv9.innerHTML = '';
     
     
     
     
     
     
      // add the child div to the container
      ni.appendChild(newdiv);
     
      ni.appendChild(newdivnewsitemtitle);
      ni.appendChild(newdivnewsitemsummary);
      ni.appendChild(newdivnewsitemurl);
      ni.appendChild(newdivnewsitemclickurl);
      ni.appendChild(newdivnewsitemsource);
      ni.appendChild(newdivnewsitemsourceurl);
      ni.appendChild(newdivnewsitemlanguage);
      ni.appendChild(newdivnewsitempublisheddate);
      ni.appendChild(chkdiv9);
     
     
         }

    How do I get the var "newdiv" to be a wrapper for all the others.

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    tsk... I feel hurt

    I'll PM you when I get home.


  3. #3
    SitePoint Addict Robert_2006's Avatar
    Join Date
    Jun 2006
    Location
    Tarpon Springs Fl.
    Posts
    265
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Gavin. I'll see you tonight.

  4. #4
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Simply a case of appending all the divs to the newdiv instead of the ni element is it not?

  5. #5
    SitePoint Addict Robert_2006's Avatar
    Join Date
    Jun 2006
    Location
    Tarpon Springs Fl.
    Posts
    265
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BrianOConnell View Post
    Simply a case of appending all the divs to the newdiv instead of the ni element is it not?
    I don't know. I'll give it a try.


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
  •