#转载请留言联系
如果需要了解什么是HTML的dom，可以参考：http://www.w3school.com.cn/htmldom/index.asp
下面的是jQuery操作DOM，并不是JavaScript。
-
创建新标签
var new_content = $('<h1>我是标题</h1>'); //$函数中如果参数不是一个选择器语法，则会被认为是一个新增的元素
-
在现存元素的内部，从后面放入元素
1.append
示例（在标题1下面添加标题2）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ var new_content=$('<h1>我是标题2</h1>'); $('body').append(new_content) //注意这里 }) </script> </head> <body> <h1>我是标题1</h1> </body> </html>
2.appendTo
示例（在标题1下面添加标题2）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ var new_content=$('<h1>我是标题2</h1>'); new_content.appendTo($('body')) //注意这里 }) </script> </head> <body> <h1>我是标题1</h1> </body> </html>
需要注意的是：append与appendTo方法的使用，位置是不同的！
-
在现存元素的内部，从前面放入元素
prepend()与prependTo()，用法和append()与appendTo()一样。只是一个在前面放入，一个在后面放入。
-
在现存元素的外部，从后面放入元素
1.after
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ var new_content=$('<h1>我是标题2</h1>') $('h1').after(new_content) }) </script> </head> <body> <h1>我是标题1</h1> </body> </html>
2.insertAfter
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ var new_content=$('<h1>我是标题2</h1>') new_content.insertAfter($('h1')) }) </script> </head> <body> <h1>我是标题1</h1> </body> </html>
-
在现存元素的外部，从前面放入元素
before()和insertBefore()
-
删除节点
$('#list li').eq(2).remove(); // 移除下标2
-
清空内容
$('#list').empty();