如何实现prepend并使用常规JavaScript附加？

Question

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

Answer 1

也许你问的是DOM methods appendChild和insertBefore。

parentNode.insertBefore(newChild, refChild)

在现有子节点newChild之前插入节点parentNode作为refChild的子节点。 （返回newChild。）

如果refChild为null，则在子项列表的末尾添加newChild。同等地，更可读的是，使用parentNode.appendChild(newChild)。

Answer 2

如果您使用的是Node.js，也可以使用unshift（）作为列表的前置

Answer 3

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

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

Answer 4

这是一个让你前进的片段：

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 5

你没有给我们太多的东西继续在这里，但我想你只是问如何在元素的开头或结尾添加内容？如果是这样，你可以很容易地做到这一点：

//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 6

如果要插入原始HTML字符串而不管多么复杂，可以使用：insertAdjacentHTML，并使用适当的第一个参数：

'beforebegin'在元素本身之前。 'afterbegin'就在元素里面，在它的第一个孩子之前。 'beforeend'就在元素里面，在它的最后一个孩子之后。 'afterend'元素本身之后。

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

用法示例：

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

DEMO

警告：insertAdjacentHTML不保留与.addEventLisntener相关的听众。

Answer 7

为了简化您的生活，您可以扩展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 8

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

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 9

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

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

结果：

<p>Example text</p>

Answer 10

在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 11

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

如果referenceElement为null或undefined，则在子节点列表的末尾插入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