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

Question

如何实现 prepend 和 附加 与常规 JavaScript 而不使用 jQuery？

Answer 1

下面是一个可以帮助您入门的代码片段：

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 放在它前面。

Answer 2

也许您正在询问 DOM 方法 appendChild 和 insertBefore。

parentNode.insertBefore(newChild, refChild)

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

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

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

非常简单。

Answer 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 附加的侦听器。

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

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

Answer 7

下面是使用 prepend 将段落添加到文档的示例。

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

结果：

<p>Example text</p>

Answer 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()) } }

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

Answer 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

Answer 10

您还可以使用 unshift() 添加到列表前面

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

Answer 12

我们终于有了一个所有现代浏览器都支持的内置 prepend() 方法

parent.prepend(newChild)

https ://caniuse.com/dom-manip-convenience

Answer 13

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

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