アペンド要素は、私が代わりのappendChildのinnerHTMLのに使用されるように、アレイ0のデータが原因innerHTMLプロパティを使用してアレイ1のデータで上書きされる

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

DOMに。ここでは、配列0の要素を取得し、それらを別々の行に格納し、配列1の要素を別の配列に格納しています。

Answer 1

機能appendChild()は、HTML要素のみを受け入れます.HTML文字列ではなく、innerHTMLを使用してください。下記のスニペットに

リファレンスを参照してください：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-->

Answer 2

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