createElement v html 사용자 정의 html 문자열 빌더

Question

매개 변수에서 테이블과 같은 것을 만들고 컨텐츠 편집 가능한 div에 삽입하려면이 경우에 가장 적합한 방법이 있습니까?

원래 행 및 열 번호와 같은 매개 변수를 전달하여 var html 문자열을 작성한 다음 execCommand ('insertHTMl', null html)를 통해 문서에 삽입했습니다. ;

모든 클래스 또는 ID의 내부 html은 하드 코딩 될 수 있으므로이 방법이 마음에 들었습니다.

createElement 명령을 실행 한 다음 작동합니다 (내가 잘못하지 않는 한) 추가하려는 각 특성이나 스타일에 대해 appendChild 행의 로그를 추가해야합니다.

또한 테이블 셀에 내부 html을 추가하는 것이 까다로웠지만 각 테이블 셀은 내부에 스팬 노드가 만들어 지길 원했지만 내 루프는 마지막 셀에만 생성했습니다. 누구든지 내가 잘못하고있는 것을 볼 수 있습니까? 이리?

mytable = document.createElement("table"); 
    mytablebody = document.createElement("tbody"); 
    myspan = document.createElement("span"); 
    newContent = document.createTextNode("Test text"); 
    myspan.appendChild(newContent); 
    myspan.style.display = "block"; 
    myspan.style.width = "100%"; 

    for (var r = 0; r < rows; r++) { 
     mycurrent_row = document.createElement("tr"); 


     for (var c = 0; c < columns; c++) { 
      mycurrent_cell = document.createElement("td");     
      mycurrent_cell.appendChild(myspan); 
      mycurrent_row.appendChild(mycurrent_cell); 
     } 
     mytablebody.appendChild(mycurrent_row); 
    } 

그래서 어쨌든 학습을 위해이 방법을 사용해야하거나 허용/단지 안전 몇 가지 기본적인 루프에서 HTML의 문자열을 구축하는 특별한 이유가 있습니까? 누군가가 내가 잘못 여기서 뭐하는 거지 볼 수 있습니다 - 내가 그 안에 스팬 노드를 가지고 만든 각 테이블 셀을 원하지만 내 루프가 마지막 셀을 만든 사전

Answer 1

에

감사합니다?

매번 동일한 노드를 추가하고 있습니다. 노드는 매번 한 번에 하나의 위치에있을 수 있기 때문에 이전 부모로부터 암시 적으로 제거됩니다. 적절한 방법은 매번 myspan을 복제하는 것입니다. 당신이 후 이러한 이전 2 개 라인과 2 라인이 필요합니다이 재현하려는 다른 독자들에 대한

mycurrent_cell.appendChild(myspan.cloneNode(true)); 

: 아이디 선택기는 DOM에서 기존 요소를 참조

var rows = 2; 
var columns = 2; 

// ... 

mytable.appendChild(mytablebody); 
document.getElementById("test").appendChild(mytable); 

... : 어쨌든 학습을 위해

<div id="test"></div> 

그래서,이 방법을 사용한다 또는 일부 BAS에서 HTML의 문자열을 구축하는 특별한 이유가있다 ic 루프는 안전/수용 가능합니까? 텍스트와 같은 노드에 삽입하는 스크립트 태그를 포함 할 수있는 임의의 HTML을 제거하는 반면

가 연결된 스트링을 사용 charlietfl의 코멘트,

을 인용하면 XSS 주입을위한 가능성을 연다.