一 创建元素
$(''<li></li>''); //动态的创建了一个 li 元素
二 添加元素
// 内部添加元素,生成之后,它们是父子关系。
// 外部添加元素,生成之后,他们是兄弟关系
1)内部添加
element.append(''内容''); //把内容放入匹配元素内部最后面,类似原生 appendChild。 element.prepend(''内容'');//把内容放入匹配元素内部最前面
2)外部添加
element.after(''内容''); // 把内容放入目标元素后面 element.before(''内容'');// 把内容放入目标元素前面
三 删除元素
element.remove() // 删除匹配的元素(本身) element.empty() // 删除匹配的元素集合中所有的子节点 element.html('') // 清空匹配的元素内容
remove 删除元素本身。 empt() 和 html('''') 作用等价,都可以删除元素里面的内容,只不过 html 还可以设置内容。
代码范例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素的创建 添加 删除</title> <script src="jquery.min.js"></script> </head> <body> <ul> <li>李白</li> </ul> <script> //1 创建元素 $("<li></li>"); //2 插入内部元素 $('ul').append($("<li>白居易</li>"));//向元素尾部压入 子元素 [父子关系] $('ul').prepend($("<li>王博</li>"));//向元素头部压入 子元素 [父子关系] //3 插入外部元素 $('ul').before($("<div>唐朝诗人</div>"));//在元素前面 压入 兄弟元素 [兄弟关系] $('ul').after($("<div>宋朝诗人</div>"));//在元素后面 压入 兄弟元素 [兄弟关系] //3 删除元素 //$('ul').remove();//ul 和 li 都被删除了 //$('ul').empty();//保留了ul 删除了ul的所有子元素 $('ul').html('打发打发');//保留了ul 删除了ul的所有子元素 区别:html还可以设置值 </script> </body> </html>