前言
最近这个项目,由于某些原因,用的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;
}
})