如何使用普通JavaScript实现prepend和append？

Question

如何在不使用jQuery的情况下，用普通JavaScript实现prepend和append？

- Ben

---

我不明白你的意思。 - Pekka

@GenericTypeTea：我也是在大约同样的时间里这样做了...现在我会放手不管它！ - Mark Byers

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

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

- Pat

---

谢谢，为什么在prepend中只使用insertBefore而不创建额外的div？就像Grumdrig的回答一样？ - Ben

这会创建一个元素并将其添加到 DOM 中，而 append 和 prepend 的工作方式不同。 - Andrei Cristian Prodan

相比于Grumdig的答案，我更理解这个。 - andrew

现在是2015年，我们能否有一个内置的prepend()方法？ - 1.21 gigawatts

Node.append或node.appendChild是无返回值的方法，请使用insertBefore(node,null)代替。 - Suhayb

Answer 2

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

parentNode.insertBefore(newChild, refChild)

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

如果refChild为空，则newChild将添加到子节点列表的末尾。同样地，更易读的方法是使用parentNode.appendChild（newChild）。

- Grumdrig

---

所以 prepend 基本上是这样的 function prepend(tag, ele) { var x =document.getElementsByTagName(tag)[0]; x.insertBefore(ele ,x.children[0]); }。它的作用是将一个元素添加到指定标签的子元素列表开头。 - Muhammad Umer

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;

相当简单。

- Munzilla

---

太好了，正是我在寻找的。 - Andrei Cristian Prodan

这种方法会强制浏览器重新解析所有现有的子元素。在上述解决方案中，浏览器只需将给定的子元素附加到文档中即可。 - Sayam Qazi

Answer 4

如果您想要插入一个无论多么复杂的原始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>");

演示

注意：insertAdjacentHTML 不会保留使用 .addEventLisntener 添加的监听器。

- artur grzesiak

---

"insertAdjacentHTML 不会保留监听器..." 什么监听器？这是 HTML，所以还没有任何元素可以绑定。如果您指的是 foo 内部的现有元素，则这不是正确的说法。.insertAdjacentHTML 的整个重点在于它确实保留监听器。您可能在想 .innerHTML += "..."，它会破坏旧的 DOM 节点。 - spanky

@spanky 你是对的，这个语句可能有多种解释方式，我实际上指的是使用insertAdjacentHTML新创建的DOM节点（不包括根节点和根节点的现有子节点）。 - artur grzesiak

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

- Raza

Answer 6

以下是关于使用prepend向文档中添加段落的示例：

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

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

结果：

<p>Example text</p>

- JamesH

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

- moka

---

如果节点没有子节点怎么办？在这种情况下，firstChild 将为 null。 - felixfbecker

prepend已经存在，参考ParentNode.prepend()，因此要创建prependChild只需调用prnt.prepend(chld)即可。 - Igor Fomenko

Answer 8

在2017年，我知道Edge 15和IE 12中，prepend方法不作为Div元素的属性包含在内。但是如果有人需要快速参考填充函数，我制作了这个：

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

简单的箭头函数，适用于大多数现代浏览器。

- akiespenc

Answer 9

document.write() 不是一个好的做法，一些浏览器（如Chrome）会在使用它时给出警告，而且如果你将其提供给客户，则可能是一个不好的解决方案，他们不想在调试控制台中看到警告信息！

此外，如果你要将代码提供给已经在其网站上使用 jQuery 进行其他功能的客户，那么 jQuery 也可能是一个不好的选择，因为如果已经有不同版本的 jQuery 在运行，就会发生冲突。

如果你想用纯JS而非JQuery插入内容到iframe中，并且不使用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);

- Dennis Kozevnikoff

Answer 10

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

- aLx13