내용

Question

내가 자바 스크립트를 통해 내용으로 테이블을 생성하기 위해 노력하고있어,하지만 난 같은이 매우 간단한 예제와 함께, 정적을 수행하려고 할 때조차 문제가 :

  document.getElementById("gmaData").innerHTML+='<table border="1">' 
      document.getElementById("gmaData").innerHTML+='<tr>' 
      document.getElementById("gmaData").innerHTML+='<td>something</td>' 
      document.getElementById("gmaData").innerHTML+='</tr>' 
      document.getElementById("gmaData").innerHTML+='</table>' 

내가 스크립트를 실행할 때

그러나, 테이블의 내용이 테이블의 외부를로드하고, <tr> 및 <td> 태그도 표시되지 않습니다 :

<div id="gmaData"> 
    <table border="1"></table> 
    something 
</div> 

나는이 원인이 될 수 무슨 생각이 없다 오류.

Answer 1

var genHTML = '<table border="1">'; 
genHTML+='<tr>'; 
genHTML+='<td>something</td>'; 
genHTML+='</tr>'; 
genHTML+='</table>'; 
document.getElementById("gmaData").innerHTML(genHTML); 

당신은 .innerHTML

Answer 2

당신은 마크 업으로 생각하고 함께 문자열 CONCAT를 사용할 수 없지만 브라우저는 객체 나무합니다 (DOM)와 함께 작동합니다.

당신이 innerHTML에서 읽을

는, 브라우저는 요소 내에 DOM 객체를 소요하고 HTML로 직렬화한다. 이에서 innerHTML으로 지정되면 브라우저는 사용자가 지정한 HTML을 구문 분석하고 일치하는 DOM 구조를 생성하여 발견 된 모든 잘못된 콘텐츠를 수정합니다.

대답은 : innerHTML에 +=을 사용하지 마십시오. 정말 좋은 이유가 없습니다. 불필요하게 비싸지 만 (보통 문제가되지는 않음), 더 중요한 것은 요소 안에있는 모든 요소는 이벤트 핸들러를 포함하여 상태를 잃을 것입니다. 그리고 물론, 브라우저는 요소의 시작 부분을 추가 한 다음 나중에 의 끝 부분을 추가 할 수 없습니다. 귀하의 경우에는

, 당신은 한 번에 전체 테이블에 대한 HTML을 할당해야합니다

가끔 할 때 할당 한 다음 문자열 변수에 HTML을 구축하고 의미

document.getElementById("gmaData").innerHTML = // Or += if you're really appending 
    '<table border="1">' + 
    '<tr>' + 
    '<td>something</td>' + 
    '</tr>' + 
    '</table>'; 

.