追加到 div，而不是正文 [重复]

Posted 2023-02-21

【中文标题】追加到 div，而不是正文 [重复]

【英文标题】：Append to div, rather than body [duplicate]

【发布时间】：2012-05-04 13:04:36

【问题描述】：

可能重复：Inserting an elementHow to do insert After() in javascript without using a library?

我在一个项目中有一点点javascript，它在页面主体之后添加了一个聊天窗口，我想对其进行更改，以便它在我指定的div“myPublisherDiv”之后添加聊天窗口。我认为这很简单，有什么想法吗？提前致谢！

var div = document.createElement('div');
    div.setAttribute('id', 'stream' + streams[i].streamId);
    document.body.appendChild(div);

【问题讨论】：

嗯，我刚刚注意到你的标题和你的问题的文字不同......如果你只是想追加，看来你只需要了解getElementById：developer.mozilla.org/en/DOM/document.getElementById跨度>

仅供参考，div.setAttribute('id', 'stream' + streams[i].streamId); 可以写成div.id = 'stream' + streams[i].streamId;； id is a reflected property on elements 并得到普遍支持。

【参考方案1】：

这有点棘手。 insertBefore 很简单，在一个节点之后插入我写了一个小辅助函数：

function insertAfter(newElement, referenceElement) 
    referenceElement.parentNode.insertBefore(newElement, referenceElement.nextSibling);


var div = document.createElement('div');
...
insertAfter(document.getElementById("myPublisherDiv"), div);

但另见https://***.com/a/1559632/1048572

【讨论】：

宁可使用nextSibling 而不是nextNode

糟糕，已编辑。无论如何谢谢:-)

【参考方案2】：

应该这样做..

var div = document.createElement('div');
div.setAttribute('id', 'stream' + streams[i].streamId);

var target = document.getElementById('myPublisherDiv');

target.parentNode.insertBefore(div, target.nextSibling);

来自How to do insert After() in JavaScript without using a library?

【讨论】：

那么您不应该投票将其作为副本关闭吗？ ;)

刚刚做了.. 我确实更新了代码以匹配 OP 的代码，这不重要吗？ :p

【参考方案3】：

给你的 div 加上一个 id

<div id="myDiv">..</div>

然后使用appendChild 附加内容：

document.getElementById("myDiv").appendChild(div);

【讨论】：

这实际上只是替换了内容。

@Amberlamps 哎呀，我的意思是+=

将+= 与innerhtml 一起使用是一种反模式，它会导致浏览器执行很多 超出所需的工作，并清除其中内容的事件处理程序.使用appendChild。

@T.J.Crowder 谢谢你的建议，我不知道有那么糟糕