소자 I 대신에 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>