.append()
可以一次添加多個(gè)內(nèi)容颁湖,內(nèi)容可以是DOM對象宣蠕、HTML string、 jQuery對象甥捺。
如果參數(shù)是function抢蚀,function可以返回DOM對象、HTML string镰禾、 jQuery對象皿曲,參數(shù)是集合中的元素位置與原來的html值。
看幾個(gè)例子:
$( ".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)
把對象插入到目標(biāo)元素尾部吴侦,目標(biāo)元素可以是selector, DOM對象, HTML string, 元素集合, jQuery對象;
$( "h2" ).appendTo( $( ".container" ) );
$( "<p>Test</p>" ).appendTo( ".inner" );
image.png
.prepend()
向?qū)ο箢^部追加內(nèi)容屋休,用法和append類似,內(nèi)容添加到最開始
$('.inner').prepend('<h1>wuxuwei</h1>')
image.png
.before()
用法和prepend類似妈倔,在對象前面(不是頭部博投,而是外面绸贡,和對象并列同級)插入內(nèi)容盯蝴,
$( ".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相反,在對象后面(不是尾部听怕,而是外面捧挺,和對象并列同級)插入內(nèi)容,參數(shù)和append類似
$( ".inner" ).after( "<p>Test</p>" );
$( "p" ).after( document.createTextNode( "Hello" ) );
image.png
.remove()
刪除被選元素(及其子元素)
$("#div1").remove();
我們也可以添加一個(gè)可選的選擇器參數(shù)來過濾匹配的元素
$('div').remove('.test');
image.png
.empty()
清空被選擇元素內(nèi)所有子元素
$('body').empty();
image.png
.html()
這是一個(gè)讀寫兩用的方法尿瞭,用于獲取/修改元素的innerHTML
- 當(dāng)沒有傳遞參數(shù)的時(shí)候闽烙,返回元素的innerHTML
- 當(dāng)傳遞了一個(gè)string參數(shù)的時(shí)候,修改元素的innerHTML為參數(shù)值
$('div').html()
$('div').html('123')
image.png
.text()
和html方法類似声搁,操作的是DOM的innerText值
image.png