Question

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

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 methods 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，有适当的第一个论点：

<强>＆＃39; beforebegin＆＃39; 在元素本身之前。的＆＃39; afterbegin＆＃39; 就在元素内部，在它的第一个孩子之前。的＆＃39; beforeend＆＃39; 就在元素内部，在它的最后一个孩子之后。的＆＃39; afterend＆＃39; 元素本身之后。

提示：您始终可以调用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对象。它可能不适用于旧版浏览器，但绝对会让您的生活更轻松：

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 6

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

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 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或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

Answer 10

如果您使用的是Node.js，也可以使用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

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

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

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

12 个答案: