Javascript、DOM：appendChild 和 textContent答案

【问题标题】：Javascript, DOM: appendChild and textContentJavascript、DOM：appendChild 和 textContent
【发布时间】：2011-07-28 21:33:50
【问题描述】：

我向 mozilla 目录提交了一个 Firefox 插件，但由于以下原因被拒绝：

item.innerHTML =   '<table style="border-collapse: collapse; width: 100%;">'
                  + '<tr><td style="line-height: inherit; padding: 0pt; width: 100%;">'
                   + word.title
                   + '</td></tr>'
                    + '</table>';

我与编辑交谈，他告诉我“use a text node and then insert it using appendChild, textContent, etc”

这对我来说听起来完全是胡言乱语，我从未使用过TextContent, appendChild 等，有点迷茫。您能告诉我如何执行上述操作，我将在脚本中编辑其他 13 个类似上述内容的实例吗？

谢谢！

【问题讨论】：

他拒绝了，因为可以使用这种技术注入 HTML 代码。
我知道，这就是他告诉我的...我知道他为什么拒绝它，但不知道如何使用他告诉我使用的其他东西。虽然这似乎有点帮助：stackoverflow.com/questions/2962137/…

标签： javascript dom appendchild

【解决方案1】：

您可能需要按照以下方式做一些事情：

var t  = document.createElement("table"),
    tb = document.createElement("tbody"),
    tr = document.createElement("tr"),
    td = document.createElement("td");

    t.style.width = "100%";

    // note the reverse order of adding child        
    tr.appendChild(td);
    tb.appendChild(tr);
    t.appendChild(tb);

   // more code to populate table rows and cells
   item.appendChild(t);

注意：以这种方式创建表格有一些注意事项，因为浏览器之间的工作方式不同。我建议咨询MDN 来确定FF。

【讨论】：

你能多写一点代码吗？我已经弄清楚了，直到只有样式属性。其他方面的其他内容......不知道如何进行。
@Ryan: document.createElement 创建一个完整的元素（包括结束标签），在您的原始元素中，您必须添加结束标签，因为您将 html 字符串添加到 dom 而不是 dom 元素。
@Ryan 您使用上面的方法将 word.title 插入到 td。即) td.appendChild(document.createTextNode(word.title));
@Ryan 用于边框折叠，它将是 t.style.borderCollapse = 'collapse'
title 应该是文本，不能有 html。

【解决方案2】：

他希望您以编程方式在 JavaScript 中创建 HTML。采取read of this post，它应该为您解决问题。如果您想了解更多信息，请发表评论。

【讨论】：

【解决方案3】：

他希望您使用一个以更直接的方式更改 DOM 的函数，而不是使用 innerHTML。追加子项

在指定父节点的子节点列表末尾添加一个节点节点。如果节点已经存在，则从当前父节点中删除节点，然后添加到新的父节点

https://developer.mozilla.org/En/DOM/Node.appendChild。它的格式是：var child = element.appendChild(child);

在你的例子中，我会这样做：

var newText = document.createTextNode(word.title);
locationInDom.appendChild(newText);

locationInDom 是您要使用 innerHTML 的位置。如果 innerHTML 正在进入一个表格，那么只需将一个 id 添加到特定的现有列并使用 getElementById 方法并在该点添加。

【讨论】：

这是我的确切代码 pastebin.com/L6hZHDLT ，在这个文件中只有两个 innerHTML 东西，你能告诉/给我替换这两个的代码吗？
你真的需要一张桌子吗？是表格数据吗？如果不只是用 item 替换 locationInDom 并使用 item.appendChild(newText);
这不是我的代码，所以我不想做很多更改，另一个开发人员，比我更有经验，但他病了，我必须确保这能通过批准，否则我就完蛋了。 ..