文档_增删改 * append(content) prepend(content) before(content) after(content) empty() remove()

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>文档_增删改</title>
</head>
<style type="text/css">
  * {
    margin: 0px;
  }

  .div1 {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 10px;
    background: blue;
  }

  .div2 {
    position: absolute;
    width: 100px;
    height: 100px;
    /*top: 50px;*/
    background: red;
  }

  .div3 {
    position: absolute;
    top: 250px;
  }
</style>

<body>
<ul id="ul1">
  <li>AAAAA</li>

  <li title="hello">BBBBB</li>
  <li class="box">CCCCC</li>

  <li title="hello">DDDDDD</li>
  <li title="two">EEEEE</li>
  <li>FFFFF</li>
</ul>
<br>
<br>
<ul id="ul2">
  <li>aaa</li>
  <li title="hello">bbb</li>
  <li class="box">ccc</li>
  <li title="hello">ddd</li>
  <li title="two">eee</li>
</ul>

<!--
1. 添加/替换元素
  * append(content)
    向当前匹配的所有元素内部的最后插入指定内容
  * prepend(content)
    向当前匹配的所有元素内部的最前面插入指定内容
  * before(content)
    将指定内容插入到当前所有匹配元素的前面
  * after(content)
    将指定内容插入到当前所有匹配元素的后面替换节点
  * replaceWith(content)
    用指定内容替换所有匹配的标签删除节点
2. 删除元素
  * empty()
    删除所有匹配元素的子元素
  * remove()
    删除所有匹配的元素
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
   需求:
   1. 向id为ul1的ul下添加一个span(最后)
   2. 向id为ul1的ul下添加一个span(最前)
   3. 在id为ul1的ul下的li(title为hello)的前面添加span
   4. 在id为ul1的ul下的li(title为hello)的后面添加span
   5. 将在id为ul2的ul下的li(title为hello)全部替换为p
   6. 移除id为ul2的ul下的所有li
   */
  $(function () {
      var $ul1 = $('#ul1');
//      1. 向id为ul1的ul下添加一个span(最后)  
      // $ul1.append('<span>我是append新增的span1</span><br/>'); 
      // $('<span>我是appendTo新增的span2</span><br/>').appendTo($ul1)

//      2. 向id为ul1的ul下添加一个span(最前)  
    //  $ul1.prepend('<span>我是prepend新增的span3</span><br/>')
    //  $('<span>我是prependTo新增的span4</span><br/>').prependTo($ul1)

//      3. 在id为ul1的ul下的li(title为hello)的前面添加span 
        // $('#ul1>li[title=hello]').before('<span>我是ul下的li(title为hello)新增的span1</span><br/>')

//      4. 在id为ul1的ul下的li(title为hello)的后面添加span 
      // $('#ul1>li[title=hello]').after('<span>我是ul下的li新增的span1</span><br/>')

//      5. 将在id为ul2的ul下的li(title为hello)全部替换为p 
       $('#ul2>li[title=hello]').replaceWith('<p>我是替换的p</p>')

//      6. 移除id为ul2的ul下的所有li
//       remove  是删除节点
        // $('#ul2').remove();
        // $('#ul2>li').remove();
        // $('#ul2').children().remove();
//      empty  清空当前节点 （掏空） 
       $('#ul2').empty();
  });
</script>
</body>
</html>
posted @ 2020-08-09 10:54  13522679763-任国强  阅读(64)  评论(0)    收藏  举报