CODEWITHSUNDEEP
javascripthtml-tableappendchild
Badhusha
Badhusha

Reputation: 196

Appending element to dom

var flag=0;
function appenditem()
{

var did=["100","101"];
var dname=["Barry","Allen"];
var dmark=["50","100"];
var tab=document.querySelectorAll(".subtable4");
var tab_length=document.querySelectorAll(".subtable4").length;

if(flag==0)
{
var row="<tr><td>"+did[0]+"</td><td>"+dmark[0]+"</td><td>"+dname[0]+"</td></tr>";
}

else if(flag==1)
{
var row="<tr><td>"+did[1]+"</td><td>"+dmark[1]+"</td><td>"+dname[1]+"</td></tr>";
}



for(var i=0;i<tab_length;i++)
    {

    tab[i].innerHTML=row;
    }

flag=1;
}
<table class="subtable4">
</table>               <!--Table 1-->

<table class="subtable4">
</table>               <!--Table 2-->

As I used the innerHTML instead of appendChild, the data of array 0 is overwritten by the data of array 1 because of using the innerHTML. Here I am getting the array 0 elements and storing them in a separate row and the array 1 elements in the separate array.

Upvotes: 1

Views: 44

Answers (2)

Mamun
Mamun

Reputation: 68933

Use innerHTML instead of appendChild(). Because querySelectorAll returns a static list. Any changes made to the document through that list by using methods like appendChild(), removeChild( etc will not be reflected at all.

function appenditem()
{
  var did="100";
  var dname="Barry";
  var dmark="50";
  var tab=document.querySelectorAll(".subtable4");
  var tab_length=document.querySelectorAll(".subtable4").length;
  var row="<tr><td>"+did+"</td><td>"+dmark+"</td><td>"+dname+"</td></tr>";

  for(var i=0;i<tab_length;i++)
  {
    tab[i].innerHTML=row;
  }
}

appenditem();
<table class="subtable4">
</table>               

<table class="subtable4">
</table>

Upvotes: 1

Naren Murali
Naren Murali

Reputation: 56650

The function appendChild() will accept only HTML elements, not html string, please use innerHTML instead. Please refer the below snippet

Reference: Node.appendChild()

function appenditem() {
  var did = "100";
  var dname = "Barry";
  var dmark = "50";
  var tab = document.querySelectorAll(".subtable4");
  var row = "<tr><td>" + did + "</td><td>" + dmark + "</td><td>" + dname + "</td></tr>";
  for (var i = 0; i < tab.length; i++) {
    tab[i].innerHTML = row;
  }
}
appenditem();
<table class="subtable4">
</table>
<!--Table 1-->

<table class="subtable4">
</table>
<!--Table 2-->

Upvotes: 0

Related Questions