的createElement v HTML自定義HTML字符串生成器

如果你想從參數創造這樣一個表，並插入到內容編輯的DIV，是有這種最佳實踐方法？的createElement v HTML自定義HTML字符串生成器

本來我是在將參數（如行號和列號）傳遞給幾個循環來構建var html字符串，然後通過execCommand（'insertHTMl'，null html）將其插入到文檔中， ;

我很喜歡這種方法，因爲任何類或ID的，內部HTML可能很難codded。

我遇到了的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字符串中的一些基本的循環一樣安全/接受一個特別的原因？

在此先感謝

來源

2017-10-07 JQuery

取決於用於文本數據的源。使用連接的字符串，而插入一個節點作爲文本刪除了可能包含腳本標記 – charlietfl

我知道了，謝謝所有的HTML開闢了XSS注入的潛力。你知道爲什麼從上面的代碼中跨度只是在表格的最後一個單元格中創建的嗎？ – JQuery

我想創建內部都有一個跨節點的每個單元格，但我僅環創造了它的最後一個單元格 - 任何人都可以看到我在做什麼錯在這裏？

你每次都追加相同的節點。由於一個節點每次只能在一個地方，它會隱式地從前一個父節點中刪除。正確的方法是每次克隆myspan。

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

對於誰想要重現這一點，你需要這些前兩行和後兩行其他讀者：

var rows = 2; 
var columns = 2; 

// ... 

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

...其中ID選擇是指現有的元素在DOM ：

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

所以對於學習的目的，無論如何，有沒有這種方法應採用或正在建立HTML的字符串在一些BAS一個特別的原因ic循環與安全/可接受一樣？

報價charlietfl的評論，

使用連接的字符串XSS注入打開了潛力，而插入一個節點作爲文本刪除了可能包含腳本標記任何HTML。

來源

2017-10-07 15:42:02 aaron

的createElement v HTML自定義HTML字符串生成器

回答

相關問題