使用 JavaScript 将 DOM 元素添加到正文的最佳方法

Posted 2023-05-07

【中文标题】使用 JavaScript 将 DOM 元素添加到正文的最佳方法

【英文标题】：Best way to add DOM Element to Body with JavaScript

【发布时间】：2016-06-09 21:08:50

【问题描述】：

我需要在每个页面上放置这段代码：

document.body.innerhtml += '<div style="position:fixed; text-align:center; left:30px; widht: 200px;bottom: -12px;"> <div class="card" style="position: relative;background: #EC2D2D;border-radius: 5px;padding: 20px 0 0px 0;box-sizing: border-box;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);-webkit-transition: .3s ease;transition: .3s ease;"> <h1 class="title" style="position: relative;z-index: 1;border-left: 5px solid #FFFFFF;margin: 0 0 25px;padding: 10px 0 10px 10px;color: #FFFFFF;font-size: 32px;font-weight: 600;/* text-transform: uppercase; */">50% less</h1> <div class="button-container" style="margin: 0 20px;text-align: center;"> <button style="outline: 0;cursor: pointer;position: relative;display: inline-block;background: 0;color: #EC2D2D;background: #fff;width: 170px;border: 2px solid #C70A0A; padding: 10px 0;font-size: 14px;font-weight: 600;line-height: 1;text-transform: uppercase;overflow: hidden;-webkit-transition: .3s ease;transition: .3s ease;"><span>Bid and Book Now</span></button> </div> <div class="footer" style="margin: 20px 0 0;color: #FFFFFF !important;font-size: 14px;font-weight: 100;text-align: center;"> <p style="color: inherit;text-decoration: none;-webkit-transition: .3s ease;transition: .3s ease;">BEST RATES - only on website</p> <p style="font-size: 10px;">End in: 1d 2h 33m</p></div> </div> <div class="card alt" style="position: absolute;top: 40px;border: 3px solid #ED2553;right: -40px;z-index: 10;width: 80px;height: 80px;background: #FFFFFF;background-image: url(&quot;http://i.imgur.com/32T7CPH.jpg&quot;);border-radius: 100%;box-shadow: none;padding: 0;-webkit-transition: .3s ease;transition: .3s ease;"> </div> </div> ';

此代码并非在每个页面都运行良好。另外，我认为它非常慢并且对某些页面造成了问题。我怎样才能用appendChild 或类似的东西写这个？

我不能使用 JQuery 的 append，因为我必须使用纯 javascript 代码。

如果使用appendChild，这段代码会是什么样子？

【问题讨论】：

您在“某些页面”遇到了什么问题？

我的控制台日志块 - 并重写所有 body dom 元素...

是的，因为您正在为整个 HTML 设置新内容。你的代码说：取body的innerHTML（即一个字符串）添加一个字符串（你在顶点之间的字符串）并将这个新字符串设置为innerHTML，你没有附加它。

那么我该如何解决这个问题并使用 appendChild ？

这个问题要么过于宽泛，要么基于观点，要么需要讨论，因此与 Stack Overflow 无关。如果您有具体的、可回答的编程问题，请提供完整的详细信息。

【参考方案1】：

appendChild方法获取一个节点并将这个节点添加到调用它的元素中。

var node = document.createElement("DIV");  
var textNode = document.createTextNode("My Div content");
node.appendChild(textNode);
document.body.appendChild(node); 

您不能将 appendChild 与包含整个 html 的字符串一起使用。

您可以做的是创建一个节点。用大字符串设置它的innerHTML。然后将节点附加到正文中。

---

代码应该是这样的：

var content = ....
var newNode = document.createElement("DIV");  
newNode.innerHTML = content;
document.body.appendChild(newNode); 

【讨论】：

这也不起作用：var node = document.createElement('DIV'); var textNode = document.createTextNode('

不是我说的。 1 创建一个节点。 2 设置该节点的innerHTML。 3. 将节点追加到正文

【参考方案2】：

在 vanilla js 中，您可以使用.appendChild，它将作为参数传递的节点添加到元素调用者。

在您的情况下（使用字符串作为要插入的 dom 元素），您可以这样做：

var el = document.createElement("div");
    el.innerHTML = "<your dom code>";

while (el.firstChild) document.body.appendChild(el.firstChild);

这有点粗鲁，但这样你将创建一个元素，用你的字符串 dom 填充它，然后将每个子元素移动到 document.body

---

这里以JsFiddle 为例，使用您的代码

【讨论】：

嗯，不，我得到：#text baseURI: "dssdfl.com" childNodes: NodeList[0] data: " " firstChild: null lastChild: null length: 1 nextElementSibling: null nextSibling: null nodeName : "#text" nodeType: 3 nodeValue: " " ownerDocument: document parentElement: body parentNode: body previousElementSibling: div previousSibling: div textContent: " " wholeText: " " proto: Text

我使用您在问题中发布的字符串代码（在此页面中）测试了脚本并且工作正常，请再次检查。这里以 jsfiddle 为例 jsfiddle.net/xd0xbuyf

@MonkeyBusiness 我使用了while，以防你有多个像"<div></div> text <div></div>" 这样的节点，但不要担心它很快（谈论性能）