jQuery创建、删除和修改html标签

1.在父标签内创建子标签，新创建的子标签放在父标签最下面

$(parent).append(son)、$(son).appendTo(parent)

<div class="d"> <h3>hello div</h3> </div>
<button onclick="myClick()">点我</button>
<script>
   function myClick() {
       //$(\'.d\').append(\'<p>hello p</p>\'); 直接一步创建子标签和子标签的内容
        var $ele=$(\'<p>\');     //等号左边为jQuery创建变量，右边为创建标签p，$(\'<p></p>\')可简写为$(\'<p>\')
        $ele.html(\'hello p\');   //给新创建的标签设置html内容
        $(\'.d\').append($ele);  //使用append添加，父标签在前，子标签在后
        //$ele.appendTo(\'.d\')  使用appendTo添加，子标签在前，父标签在后
    }
</script>

点击按钮会在div中的h3标签下面生成一个段落，段落内容为p标签内的文本

2.在父标签内创建子标签，新创建的子标签放在父标签最上面

$(parent).prepend(son)、$(son).prependTo(parent)

<div class="d"> <h3>hello div</h3> </div>
<button onclick="myClick()">点我</button>
<script>
   function myClick() {
       //$(\'.d\').prepend(\'<p>hello p</p>\'); 
        var $ele=$(\'<p>\'); 
        $ele.html(\'hello p\');
        $(\'.d\').prepend($ele); 
        //$ele.appendTo(\'.d\') 
    }
</script>

点击按钮会在div中的h3标签上面生成一个段落，段落内容为p标签内的文本

3.创建兄弟标签，新创建的标签放在指定标签下面

$(brother).after(newbrother)、$(newbrother).insertAfter(brother)

<div class="d"> <h3>hello div</h3> </div>
<button onclick="myClick()">点我</button>
<script>
   function myClick() {
       //$(\'.d\').after(\'<p>hello p</p>\'); 
        var $ele=$(\'<p>\'); 
        $ele.html(\'hello p\');
        $(\'.d\').after($ele); 
        //$ele.insertAfter(\'.d\') 
    }
</script>

4.创建兄弟标签，新创建的标签放在指定标签上面

$(brother).before(newbrother)、$(newbrother).insertBefore(brother)

<div class="d"> <h3>hello div</h3> </div>
<button onclick="myClick()">点我</button>
<script>
   function myClick() {
       //$(\'.d\').before(\'<p>hello p</p>\'); 
        var $ele=$(\'<p>\'); 
        $ele.html(\'hello p\');
        $(\'.d\').before($ele); 
        //$ele.insertBefore(\'.d\') 
    }
</script>

5.用新创建标签替换原有标签

$(old).replaceWith(new)

<div class="d"> <h3>hello div</h3> </div>
<button onclick="myClick()">点我</button>
<script>
   function myClick() { 
        var $ele=$(\'<p>\'); 
        $ele.html(\'hello p\');
        $(\'.d\').replaceWith($ele); 
    }
</script>

6.删除和清空标签

$(\'.d\').empty()：清空选择标签的文本和下属标签，但是该标签本身还存在

$(\'.d\').remove()：直接删除本标签及所有文本和下属标签

<div class="d"> 
hello
<h3>hello div</h3> 
</div>
<button onclick="myClick()">点我</button>
<script>
   function myClick() { 
        var $ele=$(\'<p>\'); 
        $ele.html(\'hello p\');
        $(\'.d\').empty();//清空div标签下的文本和和h3标签，但div标签还存在
        //$(\'.d\').remove();删除div标签及所有下属内容
    }
</script>

7.复制标签

$(\'.d\').clone()

<div>
    <button onclick="add(this)">+</button>
    <button onclick="del(this)">-</button>
    &nbsp&nbsp&nbsp&nbsp<input type="text">
</div>
<script>
   function add(self) {
       var $ele=$(self).parent().clone();
       $(self).parent().after($ele);
   }
   function del(self) {
        $(self).parent().remove();
   }

最开始只有一行，点击加号按钮则增加一行，点击减号按钮则删除一行。

在使用复制功能时，绑定的事件一定要通过this指定当前标签，因为随着克隆标签的进行，原本的标签数量会变多

<p>hello p</p>
<button onclick="add()">click me</button>
<script>
   function add() {
       var $ele=$(\'p\').clone();
       $(\'p\').after($ele)
   }

最开始，按钮点击一次、两次的效果，而点击三次则会出现42个段落。

而修改成如下代码，则每次点击按钮只会增加一行。

<p>hello p</p>
<button onclick="add(this)">click me</button>
<script>
   function add(self) {
       var $ele=$(self).prev().clone();
       $(self).prev().after($ele)
   }
</script>

转自:https://www.cnblogs.com/Forever77/p/10350799.html