js创建节点、添加节点，jq追加元素最前面_jQuery添加插入元素–before、after、append、prepend，jquery — 在元素之前/之后插入某个元素
js创建节点、添加节点
创建节点：document.createElement("li")
在后面添加节点：node.appendChild(child) node父级 child 子级
在前面添加节点：node.insertBefore(child,指定元素) node父级 child 子级
<body>
<ul>
<li>123</li>
</ul>
<script>
var ul = document.querySelector("ul");
// 1. 创建节点 元素节点
// 2.添加节点 node.appendChild(child) node父级 child 子级 元素追加到最后面（即追加元素）
var li = document.createElement("li");
ul.appendChild(li);
// 3. 在前面追加节点 node.insertBefore(child,指定元素)
var lili = document.createElement("li");
ul.insertBefore(lili, ul.children[0]); // 添加到第一个元素之前
</script>
</body>
jq追加元素最前面_jQuery添加插入元素–before、after、append、prepend
前言
最近这个项目，由于某些原因，用的js框架是年迈的jQuery。项目中免不了需要添加DOM的操作，自己也老是搞混JQ添加DOM的方法，虽然简单，但是偶尔还是要去看文档用法，觉得文字记忆有点不模糊，于是觉得结合图片来总结一下。
jQuery添加元素的方法
1.before() – 在被选元素之前插入内容
2.after() – 在被选元素之后插入内容
3.prepend() – 在被选元素的开头插入内容
4.append() – 在被选元素的结尾插入内容
添加元素方法图示
demo
JQ插入元素
.container {
width: 60%;
margin: 0 auto;
}
content {
background: #f2f2f2;
padding: 20px;
text-align: center;
}
.btn-group {
margin-top: 20px;
}
p {
color: #f00;
font-weight: bold;
}
JQ插入元素—before、after、append、prepend
我是内容一
在content前面插入元素(外部)
在content后面插入元素(外部)
在text前面插入元素(内部)
在text后面插入元素(内容)
var $container = $(‘#content’);
var $test1 = $(‘.text’);
var btns = $(‘button’);
var $h2 = $(‘h2’);
var $ele1 = $(‘
我是插入的内容1
‘)
var $ele2 = $(‘
我是插入的内容2
‘)
var $ele3 = $(‘
我是插入的内容3
‘)
var $ele4 = $(‘
我是插入的内容4
‘)
btns.on(‘click’, function () {
var index = $(this).index(); //获取点击元素的索引
switch (index) {
case 0:
// 在content前面插入元素(外部)
$container.before($ele1)
break;
case 1:
// 在content后面插入元素(外部)
$container.after($ele2)
break;
case 2:
// 在text前面插入元素(内部)
$container.prepend($ele3); //父元素添加子元素
// $ele3.prependTo($container) //子元素加入到父元素中
break;
case 3:
// 在text后面插入元素(内容)
$container.append($ele4)
// $ele3.appendTo($container) //子元素加入到父元素中
break;
}
})
————————————————
版权声明：本文为CSDN博主「Hdhnrjdjjf」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42558093/article/details/112040608
jquery — 在元素之前/之后插入某个元素
以下面代码为例：
<div class="warpper">
<span>天气很凉快</span>
<p>我是1</p>
<span class="box">我是box</span>
<p>我在2下面</p>
<span>我是3</span>
</div>
<script>
</script>
1.before() 方法在被选元素前插入指定的内容。
$(“.box”).before(“
11111″);
1
语法：$(selector).before(content)
content 必需规定要插入的内容（可包含 HTML 标签）。
1
2
如果使用函数来插入内容，使用函数在指定的元素前面插入内容。
语法：$(selector).before(function(index))
function(index)必需。规定返回待插入内容的函数。
index – 可选。接收选择器的 index 位置。
<div class="warpper">
<span>天气很凉快</span>
<p>我是1</p>
<span class="box">我是box</span>
<p>我在2下面</p>
<span class="box">我是3</span>
</div>
<script>
$(".box").before(function(n){
return "<p>The p element below has index " + n + "</p>";
});
</script>
2 . insertBefore()把匹配的元素插入到另一个指定的元素集合的前面
$("<p>你好！</p>").insertBefore(".box");
语法：$(selector).after(content)
content必需。规定要插入的内容（可包含 HTML 标签）。
也可以使用函数的方式来插入，与上面的原理一样。
4 . insertAfter() 把匹配的元素插入到另一个指定的元素集合的后面
$(“
你好！”).insertAfter(“.box”);
1
注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。
<div class="warpper">
<h1>这是一个标题</h1>
<span>天气很凉快</span>
<p>我是1</p>
<span class="box">我是box</span>
<p>我在2下面</p>
<span>我是3</span>
</div>
<script>
$("h1").insertAfter(".box");
</script>
参考 https://blog.csdn.net/Cg_Companion_Xi/article/details/106173870?ops_r