Javascript，DOM：appendChild和textContent

Question

我向Firefox目录添加了一个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个实例吗？

谢谢！

Answer 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。

Answer 2

他希望您以编程方式在JavaScript中创建HTML。 阅读这篇文章 ，它应该为您清除所有内容。 如果您需要更多信息，请发表评论。

Answer 3

他希望您不使用innerHTML，而是使用一种以更直接的方式更改DOM的函数。 AppendChild

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

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方法并在该位置添加即可。