3_4：操作元素 [ 创建 添加 删除 ]

一  创建元素

$(''<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>
posted @ 2021-03-08 11:28  棉花糖88  阅读(73)  评论(0)  编辑  收藏  举报