添加節點的jquery方法：

append()、prepend()、appendTo() 、prependTo()?

插入節點的jquery方法：

after() 、before() 、insertBefore() 、insertAfter()

舉個例子來說明以上幾種方法的用法：

html例子: <nav><ul><li>序列號1</li><li>序列號2</li><li>序列號3</li></ul> </nav>

添加節點

1、append()方法：

script: var $div = '<div>append添加的節點</div>'; $('nav').append($div); //將新創建的div節點插入到nav容器的內容底部html： <nav><ul><li>序列號1</li><li>序列號2</li><li>序列號3</li></ul><div>append添加的節點</div> </nav>

2、prepend()方法：

script: var $div = '<div>append添加的節點</div>'; $('nav').append($div); //將新創建的div節點插入到nav容器的內容頂部html： <nav><div>prepend添加的節點</div><ul><li>序列號1</li><li>序列號2</li><li>序列號3</li></ul> </nav>

3、appendTo()方法：

script: var $div = '<div>append添加的節點</div>'; var nav = $('nav'); //$div.appendTo($nav); //這樣寫是錯誤的$('<div>append添加的節點</div>').appendTo($nav);//真理在這里。。 將新創建的節點添加到nav的內容后面html： <nav><ul><li>序列號1</li><li>序列號2</li><li>序列號3</li></ul><div>appendTo添加的節點</div> </nav>

4、prependTo()方法：

script: var $div = '<div>append添加的節點</div>'; var nav = $('nav'); //$div.prependTo($nav); //和前面同理，這樣寫是錯誤的 $('<div>append添加的節點</div>').appendTo($nav);//真理在這里。。 將新創建的節點添加到nav的內容的前面html： <nav><div>prependTo添加的節點</div><ul><li>序列號1</li><li>序列號2</li><li>序列號3</li></ul> </nav>

插入節點

5、after()方法：

script: var $l_1 = $('ul>li:nth-of-type(1)); var $l_2 = $('ul>li:nth-of-type(2)); var nav = $('nav'); $l_2.after($l_1); //這里可以這么理解，第2個li后面跟著第1個li。html： <nav><ul><li>序列號2</li><li>序列號1</li><li>序列號3</li></ul> </nav>

6、before()方法：

script: var $l_1 = $('ul>li:nth-of-type(1)); var $l_2 = $('ul>li:nth-of-type(2)); var nav = $('nav'); $l_1.before($l_2); //這里可以這么理解，第1個li前面是第2個li。html： <nav><ul><li>序列號2</li><li>序列號1</li><li>序列號3</li></ul> </nav>

7、insertBefore()方法：

script: var $l_1 = $('ul>li:nth-of-type(1)); var $l_2 = $('ul>li:nth-of-type(2)); var nav = $('nav'); $l_2.insertBefore($l_1); //將第2個li插入到第1個li前面html： <nav><ul><li>序列號2</li><li>序列號1</li><li>序列號3</li></ul> </nav>

8、insertAfter()方法：

script: var $l_1 = $('ul>li:nth-of-type(1)); var $l_2 = $('ul>li:nth-of-type(2)); var nav = $('nav'); $l_1.insertAfter($l_2); //將第1個li插入到第2個li后面html： <nav><ul><li>序列號2</li><li>序列號1</li><li>序列號3</li></ul> </nav>

容易出現問題的地方在 appendTo()和preappendTo()。

轉載于:https://www.cnblogs.com/CaseyWei/p/9410538.html

總結

以上是生活随笔為你收集整理的jQuery-DOM节点插入总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。