我怎样才能实现prepend和附加普通的JavaScript？

我怎样才能实现prepend和附加普通的JavaScript而不使用jQuery？

也许你在问关于DOM方法 appendChild和insertBefore 。 

 parentNode.insertBefore(newChild, refChild)

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

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

这是一个让你走的片段： 

 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之前。

预先没有JQuery： 

 parent.insertBefore(child, parent.firstChild);

更新

Chrome ， Firefox和Safari（WebKit）支持前置 。 

 parentNode.prepend(child);

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

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

挺容易。

如果你想插入一个原始的HTMLstring，无论多复杂，你可以使用： insertAdjacentHTML ，并带有适当的第一个参数：

'beforebegin'在元素之前。 'afterbegin'就在元素之内，在它的第一个孩子之前。 “之前”就在元素之内，在最后一个孩子之后。 'afterend'元素本身之后。

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

用法的一个例子： 

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

DEMO

警告： insertAdjacentHTML不会保留使用insertAdjacentHTML附加的侦听.addEventLisntener 。

为了简化你的生活，你可以扩展HTMLElement 。 它可能不适用于较旧的浏览器，但绝对会让您的生活更轻松： 

 HTMLElement = typeof(HTMLElement) != 'undefiend' ? 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);

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

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

 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.

例子可以在这里find： Node.insertBefore

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

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

这里有一个使用前缀来添加段落到文档的例子。 

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

结果： 

 <p>Example text</p>

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

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