jQuery DOM操作 插入元素

jQuery DOM 操作 插入元素

一 、 插入元素

1> 内部插入元素

    <div class="insideAdd">
       <p>
           在内部插入元素
       </p>
   </div>

1、append（’插入的元素’)，插入到末尾

$('.insideAdd').append('<h2>222</h2>');
//插入标签元素
$('.insideAdd').append($('.insideAdd p'));
//插入已有的元素

2、appendTo 把元素插入到

$('<h2>333</h2>').appendTo('.insideAdd');
//把h2插入到里面去

3、prepend（）插入元素（在前面）

$('.insideAdd').prepend('<h2>444</h2>');
//在前面插入元素
$('<h2>555</h2>').prependTo('.insideAdd');
//把h2标签添加到里面去

4>外部插入元素

 <div class="outsideAdd">
       <h2>
           在元素外部插入元素
       </h2>

   </div>

1、after（）在元素下面插入，相当于兄弟节点

$('.outsideAdd h2').after('<p>111</p>');

2、insertAfter（）把。。。插入到里面去

$('<p>222</p>').insertAfter('.outsideAdd h2');

3、before（）在元素前面插入

$('.outsideAdd h2').before('<p>333</p>');
//在元素前面插入
$('<p>444</p>').insertBefore('.outsideAdd h2');
//把。。插入到元素前面去

3>html与text方法插入元素

<div class="htmlText">
       <p>html与text 方法</p>
</div>

$('.htmlText').html();//获取
$('.htmlText').html('<h2>2222</h2>');//设置
$('.htmlText').text();//获取,变成纯文本
$('.htmlText').text('<h2>333</h2>');//设置