createElement v html 自定义 html 字符串生成器答案

【问题标题】：createElement v html custom html string buildercreateElement v html 自定义 html 字符串生成器
【发布时间】：2018-03-19 04:05:09
【问题描述】：

如果您想从参数创建类似表格的内容并插入到内容可编辑的 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 是否安全/可接受？

提前致谢

【问题讨论】：

取决于用于文本的数据源。使用连接字符串打开了 XSS 注入的可能性，而作为文本插入节点会删除任何可能包含脚本标签的 html
我明白了，谢谢。您知道为什么从上面的代码中只能在表格的最后一个单元格中创建跨度吗？

标签： jquery createelement

【解决方案1】：

我希望创建的每个表格单元格中都有一个跨度节点，但我的循环只在最后一个单元格中创建了它 - 谁能看到我在这里做错了什么？

您每次都附加相同的节点。由于一个节点每次只能在一个地方，所以它被隐式地从前一个父节点中删除。正确的做法是每次都克隆myspan。

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

对于想要复制此内容的其他读者，您将需要这 2 行之前和之后的 2 行：

var rows = 2;
var columns = 2;

// ...

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

...id 选择器引用 DOM 中的现有元素：

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

因此，无论如何，出于学习目的，是否有特殊原因应该使用这种方法，或者在一些基本循环中构建一串 HTML 是否安全/可接受？

引用charlietfl的评论，

使用串联的字符串可能会导致 XSS 注入，而将文本作为文本插入节点会删除任何可能包含脚本标签的 html。

【讨论】：