jQuery的DOM操作

.append()

1. 可以一次添加多个内容，内容可以是DOM对象、HTML string、 jQuery对象。

2. 如果参数是function，function可以返回DOM对象、HTML string、 jQuery对象，参数是集合中的元素位置与原来的html值。
   看几个例子：

$( ".inner" ).append( "<p>Test</p>" );
$( "p" ).append( "<strong>Hello</strong>" );
$( "p" ).append( $( "strong" ) );
$( "p" ).append( document.createTextNode( "Hello" ) );

image.png

https://jsbin.com/yupetil/edit?html,js,output

..appendTo(target)

把对象插入到目标元素尾部，目标元素可以是selector, DOM对象, HTML string, 元素集合, jQuery对象;

$( "h2" ).appendTo( $( ".container" ) );
$( "<p>Test</p>" ).appendTo( ".inner" );

image.png

.prepend()

向对象头部追加内容，用法和append类似，内容添加到最开始

$('.inner').prepend('<h1>wuxuwei</h1>')

image.png

.before()

用法和prepend类似，在对象前面(不是头部，而是外面，和对象并列同级)插入内容，

$( ".inner" ).before( "<p>Test</p>" );
$( ".container" ).before( $( "h2" ) );
$( "p" ).first().before( newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).before( "<b>Hello</b>" );
$( "p" ).before( document.createTextNode( "Hello" ) );

image.png

.after()

和before相反，在对象后面(不是尾部，而是外面，和对象并列同级)插入内容，参数和append类似

$( ".inner" ).after( "<p>Test</p>" );
$( "p" ).after( document.createTextNode( "Hello" ) );

image.png

.remove()

删除被选元素（及其子元素）

 $("#div1").remove();

我们也可以添加一个可选的选择器参数来过滤匹配的元素

$('div').remove('.test');

image.png

.empty()

清空被选择元素内所有子元素

$('body').empty();

image.png

.html()

这是一个读写两用的方法，用于获取/修改元素的innerHTML

1. 当没有传递参数的时候，返回元素的innerHTML
2. 当传递了一个string参数的时候，修改元素的innerHTML为参数值

$('div').html()
$('div').html('123')

image.png

.text()

和html方法类似，操作的是DOM的innerText值

image.png