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;

}

})