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

Question

如果您想从参数创建类似 table 的内容并插入内容 editable div，是否有最佳实践方法？

最初我是将参数（例如行号和列号）传递到几个循环中以构建 var html 的字符串，然后通过 execCommand('insertHTMl', 空 html);

我喜欢这种方法，因为任何类或 id，内部 html 都可以硬编码。

我遇到了 createElement 命令然后它起作用了但是（除非我做错了）如果你想添加每个属性或样式，你必须添加一个 appendChild 行的日志。

我还发现将一些内部 html 添加到 table 单元格很棘手，我希望创建的每个 table 单元格内部都有一个跨度节点，但我的循环只创建了它在最后一个单元格中 - 谁能看到我在这里做错了什么？

 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 字符串，就像 safe/acceptable?

提前致谢

Answer 1

I wanted each table cell created to have a span node inside it but my loop only created it in the last cell - can anyone see what i am doing wrong here?

您每次都附加相同的节点。由于一个节点每次只能在一个地方，因此它被隐式地从前一个父节点中删除。正确的方法是每次克隆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>

So for learning purposes anyhow, is there a particular reason this method should be used or is building up a string of HTML in some basic loops just as safe/acceptable?

引用 charlietfl 的评论，

使用连接的字符串会打开 XSS 注入的可能性，而作为文本插入节点会删除任何可能包含脚本标签的 html。

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

createElement v html custom html string builder

jquery

createelement