在JavaScript中有insertBefore(),但如何在不使用jQuery或其他库的情况下在另一个元素之后插入一个元素?
当前回答
这段代码是为了在最后一个现有的子文件之后插入一个链接项,以内联一个小css文件
var raf, cb=function(){
//create newnode
var link=document.createElement('link');
link.rel='stylesheet';link.type='text/css';link.href='css/style.css';
//insert after the lastnode
var nodes=document.getElementsByTagName('link'); //existing nodes
var lastnode=document.getElementsByTagName('link')[nodes.length-1];
lastnode.parentNode.insertBefore(link, lastnode.nextSibling);
};
//check before insert
try {
raf=requestAnimationFrame||
mozRequestAnimationFrame||
webkitRequestAnimationFrame||
msRequestAnimationFrame;
}
catch(err){
raf=false;
}
if (raf)raf(cb); else window.addEventListener('load',cb);
其他回答
这是使用普通javascript在另一个元素之后添加一个元素的最简单方法
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
参考: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
尽管insertBefore()很好,这里的大多数答案都引用了它。为了增加灵活性,更明确一点,你可以使用:
将insertAdjacentElement()作为refElem。insertAdjacentElement(position, newElem)允许你引用任何元素,并将将要移动的元素插入你想要的位置(position可以是'beforebegin', 'afterbegin', 'beforeend', 'afterend'之一),如下所示:
// refElem.insertAdjacentElement('beforebegin', myElem);
<p id="refElem">
// refElem.insertAdjacentElement('afterbegin', myElem);
... content ...
// refElem.insertAdjacentElement('beforeend', myElem);
</p>
// refElem.insertAdjacentElement('afterend', myElem);
对于类似的用例,其他需要考虑的用例:insertAdjacentHTML()和insertAdjacentText()
引用:
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText
我使用以下命令在选择的末尾插入选项。通过传递null作为第二个参数。我不确定这是否是一个异常的“选择”元素,因为我从来没有尝试过其他任何东西,但如果有人来这里寻找这个可能会有所帮助。在IE上也能工作(令人惊讶)。:)
var x = document.getElementById("SELECT_LIST");
var boption = document.createElement("option");
boption.text = "SOME TEXT";
boption.value = "SOME VALUE";
x.insertBefore(boption, null);
可以使用appendChild函数在元素之后插入。
参考:http://www.w3schools.com/jsref/met_node_appendchild.asp
这段代码是为了在最后一个现有的子文件之后插入一个链接项,以内联一个小css文件
var raf, cb=function(){
//create newnode
var link=document.createElement('link');
link.rel='stylesheet';link.type='text/css';link.href='css/style.css';
//insert after the lastnode
var nodes=document.getElementsByTagName('link'); //existing nodes
var lastnode=document.getElementsByTagName('link')[nodes.length-1];
lastnode.parentNode.insertBefore(link, lastnode.nextSibling);
};
//check before insert
try {
raf=requestAnimationFrame||
mozRequestAnimationFrame||
webkitRequestAnimationFrame||
msRequestAnimationFrame;
}
catch(err){
raf=false;
}
if (raf)raf(cb); else window.addEventListener('load',cb);
推荐文章
- 如何在Typescript中解析JSON字符串
- Javascript reduce()在对象
- 在angularJS中& vs @和=的区别是什么
- 错误"Uncaught SyntaxError:意外的标记与JSON.parse"
- JavaScript中的querySelector和querySelectorAll vs getElementsByClassName和getElementById
- 给一个数字加上st, nd, rd和th(序数)后缀
- 如何以编程方式触发引导模式?
- setTimeout带引号和不带括号的区别
- 在JS的Chrome CPU配置文件中,'self'和'total'之间的差异
- 用javascript检查输入字符串中是否包含数字
- 如何使用JavaScript分割逗号分隔字符串?
- 在Javascript中~~(“双波浪号”)做什么?
- 谷歌chrome扩展::console.log()从后台页面?
- 未捕获的SyntaxError:
- [].slice的解释。调用javascript?