jquery元素操作
主要是遍历、创建、添加、删除元素操作。
1.创建元素
语法:
$("
- ")
动态的创建了一个 -
2.添加元素
1.内部添加
element.append(“内容”)
把内容放入匹配元素最后面,类似原生appendChild
$(“ul”).prepend(li); // 内部添加并且放在内容的最前面2.外部添加
element.after(“内容”) // 把内容放入目标元素后面
element.before(“内容”) // 把目标放入目标元素前面
内部添加元素,生成之后,他们是父子关系
外部添加元素,生成之后,他们是兄弟关系3.删除元素
element.remove() // 删除匹配的元素(本身 自杀)
element.empty() // 删除匹配的元素集合中所有的子节点
element.html("") // 清空匹配的元素内容栗子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery-mini.js"></script> </head> <body> <ul> <li>原先的li</li> </ul> <div class="test">我是原先的div</div> <script> // 1.创建元素 var li = $("<li>我是后来创建的li</li>"); // 2.添加元素 // (1)内部添加 // $("ul").append(li); // 内部添加并且放在内容的最后面 $("ul").prepend(li); // 内部添加并且放在内容的最前面 // (2)外部添加 var div = $("<div>我是后来的div</div>"); // $('.test').after(div); $('.test').before(div); // 3.删除元素 // $("ul").remove(); $("ul").empty(); $("div").html(""); </script> </body> </html>