<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>节点操作</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ var $h1 = '<h1>这是一个h1标签</h1>'; var $em = '<em>em标签</em>'; var $i = '<i>i标签</i>'; var $strong = '<strong>strong标签</strong>'; //使用原生写法.(在内部添加新元素) // $('.div01').html( $('.div01').html() + $h1) // 使用jquery写法.在内部添加新元素; ( 内部-最后 ) // $('.div01').append($h1); //把新元素添加到已有元素内部最后(更换顺序,调整主宾) $($h1).appendTo('.div01'); // 把新元素添加到已有元素的( 内部-最前 ). // $('.div01').prepend($em); // $($em).prependTo('.div01') // 把新元素添加到已有元素的( 外部-后面 ). // $('.div01').after($i); // $($i).insertAfter('.div01') // 把新元素添加到已有元素的( 外部-前面 ). // $('.div01').before($strong); // $($strong).insertBefore('.div01'); //删除已有标签remove $('.div01').remove() // 删除已有标签的时候, 其他依托于此标签添加的标签也会被删除!!!! }) </script> </head> <body> <div class="div01">我是一个div元素</div> <div class="div02">我是一个div元素</div> </body> </html>