如何使用常规 JavaScript 实现 prepend 和 append？

如何在不使用 jQuery 的情况下使用常规 JavaScript 实现 假设和 附录？

157125 次浏览
小开

这里有一个片段可以帮助你:

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

小开
最佳答案

也许你问的是 DOM 方法 appendChild和 insertBefore。

parentNode.insertBefore(newChild, refChild)

将节点 newChild作为 parentNode的子节点插入到 现有的子节点 refChild(返回 newChild)

如果 refChild为空，则将 newChild添加到 儿童。同样地，更可读地，使用 parentNode.appendChild(newChild).

小开

您没有给我们提供太多信息，但我认为您只是在询问如何向元素的开头或结尾添加内容？ 如果是这样，你可以很容易地做到这一点:

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

很简单。

小开

为了简化你的生活，你可以扩展 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);
小开

如果要插入原始 HTML 字符串，无论多么复杂，都可以使用: insertAdjacentHTML ，有适当的第一个论点:

“开始之前” 在元素本身之前。 “开始后” 就在元素内部，在它的第一个子元素之前。 “之前” 就在元素内部，在它的最后一个子元素之后。 “下午” 在元素本身之后。

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

一个用法的例子:

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

演示

警告: insertAdjacentHTML不能保存与 .addEventLisntener连接的侦听器。

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

如果 reference enceElement 为 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

小开

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

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

我在我的项目中添加了这个，它似乎起作用了:

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

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

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

结果:

<p>Example text</p>
小开

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

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

小开

您还可以使用 unshift ()来预置列表

小开

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

提交答案