jQuery简单操作HTML的DOM
#转载请留言联系
如果需要了解什么是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();
代码成就万世基积沙镇海,梦想永在凌云意意气风发。