javascript - 追加元素到dom

Question

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-->

由于我使用了 innerHTML 而不是 appendChild，因为使用了 innerHTML，数组 0 的数据被数组 1 的数据覆盖。在这里，我获取数组 0 元素并将它们存储在单独的行中，并将数组 1 元素存储在单独的数组中。

Answer 1

使用 innerHTML 代替 appendChild()。因为 querySelectorAll 返回一个静态列表。使用 appendChild()、removeChild( 等方法通过该列表对文档所做的任何更改都不会反射(reflect)出来。

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>