jquery用法-添加元素

我们常用到的添加方法主要有：append  prepend  before after

下面通过例子来说明它们之间的不同：

1、添加内容

<p id="p1">hello world</p>
<p id="p2">hell world</p>
<button id="btn1">按钮</button>
<button id="btn2">按钮2</button>

 $(document).ready(function(){
        $('#btn1').click(function(){
          //  $('#p1').append('this is my webpage and content');   //在p元素（内部）内容后面追加
            $('#p1').prepend('this is my webpage add content');    //在p元素内容前面追加
        })
        $('#btn2').click(function(){
            //$('#p2').before('hello1！');     //在元素（外部）前添加加
              $('#p2').after('hello!')     //在元素后添加
 });

    })

2、添加元素

<button id="btn3" οnclick="appendText()">追加</button>

 function appendText(){
        var text1='<p>添加的p元素</p>';
        var text2 = $('<p></p>').text('天机');
        var text3 = document.createElement('p');
        text3.innerHTML = 'acely';
        $('body').append(text1,text2,text3);
    }