title: how to overwrite the row values of dynamically created table on button click using javascript
body: <p>I have a drop down from which user can select option like "old","new". According to the selected option i am querying data from xml and displaying it in table.</p>
  
  <p>Html</p>
  
  <pre><code>&lt;body&gt;
  &lt;table id="NovelList" class="NovelList" border="1"&gt;
  &lt;tr&gt;
  &lt;th&gt;Novel Title&lt;/th&gt;
  &lt;th&gt;Author&lt;/th&gt;
  &lt;th&gt;Publishing Year&lt;/th&gt;
  &lt;th&gt;Price&lt;/th&gt;
  &lt;th&gt;Purchase&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>and for adding data to table on option select i am doing this:-</p>
  
  <pre><code>var nodes = xmlDoc.evaluate(pathExpr, xmlDoc, nsResolver, XPathResult.ANY_TYPE, null);
          var result = nodes.iterateNext();
          while (result) {
              var b= [];
              var d=result.childNodes;
              for(var i=0;i&lt;d.length;i++){
                  if(d[i].nodeType == 1){
                      b.push(d[i]);
                      }
                  }
              for(var p=0;p&lt;b.length;p++){
                      var n = b[p];
                      if (n.localName== "title"){var t = n.childNodes[0].nodeValue;}
                              if (n.localName== "author"){var a = n.childNodes[0].nodeValue;}
                              if (n.localName== "year"){var y = n.childNodes[0].nodeValue;}
                              if (n.localName== "price"){var pr = n.childNodes[0].nodeValue;}
                              if (n.localName== "code"){var c = n.childNodes[0].nodeValue;}
  
                      }
              $('.NovelList tr:last').after(
                      '&lt;tr&gt;&lt;td class="value"&gt;'+ t
                              + '&lt;/td&gt;&lt;td class="value"&gt;'+ a
                              + '&lt;/td&gt;&lt;td class="value"&gt;' + y
                              + '&lt;/td&gt;&lt;td class="value"&gt;' + pr
                              + '&lt;/td&gt;&lt;td class="chk"&gt;&lt;input type="checkbox" name="chkbox" value='+'"'+c+'"'+'&gt;&lt;/td&gt;&lt;/tr&gt;');
          result = nodes.iterateNext();
          }
      }
  </code></pre>
  
  <p>but as i am using ".after", every time i select an option it is getting appended to the already displayed table.</p>
  
  <p>I want to replace the table rows whenever an option is selected.</p>