的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字符串生成器

回答

相关问题