javascript - Using createDocumentFragment to replace an existing column in a table -

i've read createdocumentfragment way more faster appending elements 1 one dom in for-loop, e.g. see here.

what want do:

1. create table column in document fragment. column should contain numbers array (for example "ratings").
2. after want replace existing column new 1 (the "fragment" one). can put whole column dom @ once.

my problem:

i can't figure out how replace existing column if there one. appending on other hand no problem.

my jsfiddle: http://jsfiddle.net/leqg9/2/

helpful links, here , here

html

<table id = "table">     <tr>         <th>name</th>         <th>rating</th>     </tr>     <tr>         <td>a.h.hattray </td>         <td id = "row0"></td>     </tr>     <tr>         <td>icke_eben </td>         <td id = "row1"></td>     </tr>     <tr>         <td>john_doe123 </td>         <td id = "row2"></td>     </tr> </table> 

javascript

var rating = [1, 10, 3]; var fragment = document.createdocumentfragment();   (var = 0, len = rating.length; < len; i++){      var element = document.createelement('tr');     element.innerhtml = rating[i];     fragment.appendchild(element); } document.getelementbyid('table').appendchild(fragment); //i know here should code replace second column! 

the following code demonstrates possible manipulate existing table in documentfragment.

var rating = [1, 10, 3]; var thetable = document.getelementbyid('table'); var frag = document.createdocumentfragment(); frag.appendchild(thetable); var col2 = frag.queryselectorall('tr td:nth-of-type(2)'); (var i=0; < col2.length; i++) {     col2[i].innerhtml = rating[i]; } // possible use insertcell , deletecell var therows = frag.queryselectorall('tr'); (var i=0; < therows.length; i++) {     var x = therows[i].insertcell(1);     if (i > 0)          x.innerhtml = 'new one';     else         x.innerhtml = 'the header'; } document.body.appendchild(frag); 

(making new cell in first row th element, rather td requires little more work, using createelement , appendchild or insertbefore.)

if step through table removed dom when appended fragment, reappears when fragment appended body.