将元素附加到dom

Question

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

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

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>

Answer 2

函数<p> My name is Apple. </p> <input placeholder="type words"/>只接受HTML元素，而不是html字符串，请改用appendChild()。请参阅以下代码段

参考：Node.appendChild()

innerHTML

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();