Javascript、DOM：appendChild 和 textContent

发布于 2024-11-26 15:44:39 字数 567 浏览 1 评论 0原文

我向 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>';

我与编辑交谈，他告诉我“使用文本节点，然后使用appendChild、textContent等插入它”

这对我来说听起来完全是胡言乱语，我从未使用过 TextContent、appendChild 等，并且有点迷失。您能否向我展示如何执行上述操作，然后我将编辑脚本中类似上述内容的其他 13 个实例？

谢谢！

原文

I submitted a Firefox addon to the mozilla directory and it was rejected because of this:

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

I spoke to the editor and he tells me to "use a text node and then insert it using appendChild, textContent, etc"

That sounds like total gibberish to me, i have never used TextContent, appendChild etc and am a bit lost. Can you show me how to do the above and I'll edit the other 13 instances i have of something like the above in my script?

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

晨敛清荷 2024-12-03 15:44:41

他希望您使用一个以更直接的方式更改 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并在该点添加。

Rather than using innerHTML he wants you to use a function that changes the DOM in a more direct manner. AppendChild

Adds a node to the end of the list of children of a specified parent
node. If the node already exists it is removed from current parent
node, then added to new parent node

https://developer.mozilla.org/En/DOM/Node.appendChild. The format for it is:var child = element.appendChild(child);

In your instance i would do:

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

Where locationInDom is where you were going to use the innerHTML. If the innerHTML was going into a table then just add an id to the specific existing column and use the method getElementById and add at that point.

回复收藏 0 原文

生生漫 2024-12-03 15:44:40

您可能需要按照以下方式执行某些操作：

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。

You probably need to do something along these lines:

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);

Note: There are caveats to creating a table this way as things work differently between browsers. I would suggest consulting MDN to be sure about FF.

回复收藏 0 原文