如何使用常规 JavaScript 实现前置和附加？

Posted 2023-03-11

【中文标题】如何使用常规 JavaScript 实现前置和附加？

【英文标题】：How can I implement prepend and append with regular JavaScript?

【发布时间】：2011-03-24 10:10:45

【问题描述】：

如何在不使用 jQuery 的情况下使用常规 javascript 实现 prepend 和 append？

【问题讨论】：

我不明白你的意思。

@GenericTypeTea：我也是在同一时间...我现在就别管它了！

@Mark - 你的编辑更好:)。

【参考方案1】：

这是一个帮助你前进的 sn-p：

theParent = document.getElementById("theParent");
theKid = document.createElement("div");
theKid.innerhtml = 'Are we there yet?';

// append theKid to the end of theParent
theParent.appendChild(theKid);

// prepend theKid to the beginning of theParent
theParent.insertBefore(theKid, theParent.firstChild);

theParent.firstChild 将为我们提供对theParent 中第一个元素的引用，并将theKid 放在它之前。

【讨论】：

谢谢，为什么前置只使用 insertBefore 而不创建额外的 div？喜欢 Grumdrig 的回答吗？

这会创建一个元素并将其添加到 dom 中，追加和前置的工作方式不同

与 Grumdig 的回答相比，我得到了这个

现在是 2015 年。我们可以有一个内置的 prepend() 方法吗？

Node.append 或 node.appendChild 是 void 方法，使用 insertBefore(node,null) 代替

【参考方案2】：

也许你问的是DOM methodsappendChild和insertBefore。

parentNode.insertBefore(newChild, refChild)

将节点 newChild 作为 parentNode 的子节点插入到 现有子节点refChild。 （返回newChild。）

如果refChild 为空，则newChild 被添加到列表的末尾 孩子们。等效且更具可读性，使用 parentNode.appendChild(newChild).

【讨论】：

so prepend 基本上就是这个然后function prepend(tag, ele) var x =document.getElementsByTagName(tag)[0]; x.insertBefore(ele ,x.children[0]);

【参考方案3】：

您在这里没有给我们太多说明，但我认为您只是在问如何将内容添加到元素的开头或结尾？ 如果是这样，您可以很容易地做到这一点：

//get the target div you want to append/prepend to
var someDiv = document.getElementById("targetDiv");

//append text
someDiv.innerHTML += "Add this text to the end";

//prepend text
someDiv.innerHTML = "Add this text to the beginning" + someDiv.innerHTML;

很简单。

【讨论】：

不错，正是我想要的。

@Munzilla 此方法将强制浏览器再次解析所有现有子项。在上述解决方案中，浏览器只需将给定的子项附加到文档。

【参考方案4】：

如果你想插入一个原始的 HTML 字符串，无论多么复杂，你都可以使用： insertAdjacentHTML，带有适当的第一个参数：

'开始之前' 在元素本身之前。 '之后' 就在元素内部，在它的第一个孩子之前。 '结束前' 就在元素内部，在它的最后一个子元素之后。 '之后' 在元素本身之后。

提示：您可以随时调用Element.outerHTML 来获取代表要插入的元素的 HTML 字符串。

使用示例：

document.getElementById("foo").insertAdjacentHTML("beforeBegin",
          "<div><h1>I</h1><h2>was</h2><h3>inserted</h3></div>");

DEMO

警告：insertAdjacentHTML 不会保留以.addEventLisntener 附加的侦听器。

【讨论】：

"insertAdjacentHTML 不保留听众..." 什么听众？它是 HTML，所以还没有任何要绑定的元素。如果您指的是foo 中的现有元素，那么这不是一个真实的陈述。 .insertAdjacentHTML 的全部意义在于它确实保留了 听众。你可能会想到.innerHTML += "..."，它会破坏旧的 DOM 节点。

@spanky 你说得对，这句话可以用多种方式解释，我的意思是用insertAdjacentHTML 新创建的 DOM 节点（不是根，也不是根的现有后代）跨度>

【参考方案5】：

我在我的项目中添加了这个，它似乎有效：

HTMLElement.prototype.prependHtml = function (element) 
    const div = document.createElement('div');
    div.innerHTML = element;
    this.insertBefore(div, this.firstChild);
;

HTMLElement.prototype.appendHtml = function (element) 
    const div = document.createElement('div');
    div.innerHTML = element;
    while (div.children.length > 0) 
        this.appendChild(div.children[0]);
    
;

例子：

document.body.prependHtml(`<a href="#">Hello World</a>`);
document.body.appendHtml(`<a href="#">Hello World</a>`);

【参考方案6】：

为了简化您的生活，您可以扩展HTMLElement 对象。它可能不适用于旧版浏览器，但绝对会让您的生活更轻松：

HTMLElement = typeof(HTMLElement) != 'undefined' ? HTMLElement : Element;

HTMLElement.prototype.prepend = function(element) 
    if (this.firstChild) 
        return this.insertBefore(element, this.firstChild);
     else 
        return this.appendChild(element);
    
;

所以下次你可以这样做：

document.getElementById('container').prepend(document.getElementById('block'));
// or
var element = document.getElementById('anotherElement');
document.body.prepend(div);

【讨论】：

如果节点没有子节点怎么办？在这种情况下 firstChild 将为空

prepend 已经存在，参见 ParentNode.prepend()，所以要使 prependChild 调用 prnt.prepend(chld) 就足够了

【参考方案7】：

这是一个使用 prepend 向文档添加段落的示例。

var element = document.createElement("p");
var text = document.createTextNode("Example text");
element.appendChild(text);
document.body.prepend(element);

结果：

<p>Example text</p>

【参考方案8】：

2017 年我知道 Edge 15 和 IE 12 的 prepend 方法不包含在 Div 元素的属性中，但如果有人需要快速参考 polyfill 一个函数，我做了这个：

 HTMLDivElement.prototype.prepend = (node, ele)=> 
               try  node.insertBefore(ele ,node.children[0]); 
                     catch (e) throw new Error(e.toString())  

与大多数现代浏览器兼容的简单箭头功能。

【参考方案9】：

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

如果 referenceElement 为 null 或未定义，则将 newElement 插入到子节点列表的末尾。

insertedElement The node being inserted, that is newElement
parentElement The parent of the newly inserted node.
newElement The node to insert.
referenceElement The node before which newElement is inserted.

可以在此处找到示例：Node.insertBefore

【参考方案10】：

你也可以使用 unshift() 来添加列表

【参考方案11】：

document.write() 不是一个好习惯，如果您使用它，某些浏览器（如 Chrome）会给您一个警告，如果您将它提供给客户，他们不想使用它可能是一个糟糕的解决方案您的代码并在调试控制台中查看警告！

此外，如果您将代码提供给已经在其网站上使用 jQuery 实现其他功能的客户，那么 jQuery 也可能是一件坏事，如果已经运行了不同版本的 jQuery，则会发生冲突。

如果你想在 iframe 中插入内容，并且使用纯 JS，不使用 JQuery，不使用 document.write()，我有一个解决方案。

您可以使用以下步骤

1.选择您的 iframe：

var iframe = document.getElementById("adblock_iframe");

2.创建一个要插入框架的元素，比如一张图片：

var img = document.createElement('img');
img.src = "https://server-name.com/upload/adblock" + id + ".jpg";
img.style.paddingLeft = "450px";
//scale down the image is we have a high resolution screen on the client side
if (retina_test_media == true && high_res_test == true) 
    img.style.width = "200px";
    img.style.height = "50px";
 else 
    img.style.width = "400px";
    img.style.height = "100px";

img.id = "image";

3.将图片元素插入iframe：

iframe.contentWindow.document.body.appendChild(img);

【参考方案12】：

这不是最好的方法，但如果有人想在所有内容之前插入一个元素，这里有一种方法。

var newElement = document.createElement("div");
var element = document.getElementById("targetelement");
element.innerHTML = '<div style="display:none !important;"></div>' + element.innerHTML;
var referanceElement = element.children[0];
element.insertBefore(newElement,referanceElement);
element.removeChild(referanceElement);