如何实现prepend并使用常规JavaScript附加?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何实现prepend并使用常规JavaScript附加?相关的知识,希望对你有一定的参考价值。
如何在不使用jQuery的情况下使用常规javascript实现prepend和append?
也许你问的是DOM methods appendChild
和insertBefore
。
parentNode.insertBefore(newChild, refChild)
在现有子节点
newChild
之前插入节点parentNode
作为refChild
的子节点。 (返回newChild
。)如果
refChild
为null,则在子项列表的末尾添加newChild
。同等地,更可读的是,使用parentNode.appendChild(newChild)
。
如果您使用的是Node.js,也可以使用unshift()作为列表的前置
这不是最好的方法,但如果有人想在一切之前插入一个元素,这是一种方法。
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);
这是一个让你前进的片段:
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
放在它之前。
你没有给我们太多的东西继续在这里,但我想你只是问如何在元素的开头或结尾添加内容?如果是这样,你可以很容易地做到这一点:
//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;
满容易。
如果要插入原始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
相关的听众。
为了简化您的生活,您可以扩展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);
我在我的项目中添加了这个,它似乎工作:
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元素的属性中,但是如果有人需要快速引用polyfill函数我做了这个:
HTMLDivElement.prototype.prepend = (node, ele)=>{
try { node.insertBefore(ele ,node.children[0]);}
catch (e){ throw new Error(e.toString()) } }
简单的箭头功能,与大多数现代浏览器兼容。
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.
以上是关于如何实现prepend并使用常规JavaScript附加?的主要内容,如果未能解决你的问题,请参考以下文章