版权声明：版权所有-江西服装学院 https://blog.csdn.net/qq_38263696/article/details/83039946
插入和替换元素
第一组: $ (target).method(content) , content 可以是Node ， jQuery对象 ，或 纯文本内容 ， HTML字符串
append() prepend() after() before() replaceWith();
第二组：$(contend).method(target);
appendTo() prependTo() insertAfter() insertBefore() replaceAll();
注意: 将文档中已存在的元素, 会从当前位置移走它
复制元素 : clone();
包装元素: wrap() , wrapInner() , wrapAll();
删除元素: empty() , remove(), unwrap() , detach()
上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>this is a test</title>
<style type="text/css">
*{
margin: 0;padding: 0;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
<div id="log"> <strong> Login </strong> </div>
<a href="#" onclick="alert()">link</a>
<div id="test">
<p class="one">this is a test</p>
<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
<p>F</p>
<p>G</p>
</div>
<p>hello</p>
<div id="spanCol">
<span>1</span> <br>
<span>2</span> <br>
<span>3</span> <br>
<span>4</span> <br>
<span>5</span> <br>
</div>
</body>
</html>
<script>
// 插入和替换元素
var textNode= document.getElementsByTagName("div")[0].firstChild; //获取第一个div的第一个文本节点
$("p").append(textNode); //将textNode移动到所有的<p>元素后面, 成为她们的lastChild
$("p").prepend("<strong>first: </strong>"); // 将<strong>first:</strong> 插入到p元素的起始处成为firstChild
$("#log").replaceWith("<h1 align='center'>welcome to CSDN </h1>");
$(document.createElement("hr")).appendTo("h1"); // 在<h1>们插入<br> , 是<br>是<h1>的lastChild();
//注意 appendTo(), to- 读法, 把xxx 插入到xxx里;
// append(), 读法 ， xxx 追加 xxx子节点
//复制元素 (clone())
//clone()创建并返回所有选中元素(包含所有后代节点)的一个副本, 返回的jQuery对象的元素不是文档的一部分
//所以没有删除效果 , 当clone() 的参数为true时即 $(xxx).clone(true) 时 会复制事件处理程序和元素相关联的数据(data())
$("#test .one").clone().appendTo("#test"); // 注意与无clone()的差异即替换为 $("#test .one").appenTo("#test");
//包装元素 wrap围巾 , xxx的围巾是xxx;
// wrap() . wrapInner() . wrapAll();
// 将<h1>大佬们用div包起来；<div style="color:yellow"><h1>xxxxxxx</h1></div>
$("h1").wrap("<div style='color: yellow' ></div>");
// 将 <h1></h1> 的内容用 <strong></strong> 包起来
$("h1").wrapInner("<strong></strong>"); //so easy to happy
//删除元素
// empty() , 删除删除元素内容为空
// $("body").empty(); // 空页面
// remove():
// 从文档删除选中的元素 , 通常不带参数调用remove()方法, 如果插入一个参数，会当做selector, 从$类数组选择删除
// $("body").remove() ; // body标签都没有了 , 更别说元素的content内容
//$("div").remove("#spanCol") ; //把 <div id="spanCol"><div>删除;
// unwarp()方法是 wrapAll()和wrap() 方法的反操作;
// detach() // 不逼逼,逼逼也不懂
// d*##$.
// zP"""""$e. $" $o
//4$ '$ $" $
//'$ '$ J$ $F
// 'b $k $> $
// $k $r J$ d$
// '$ $ $" $~
// '$ "$ '$E $
// $ $L $" $F ...
// $. 4B $ $$$*"""*b
// '$ $. $$ $$ $F
// "$ R$ $F $" $
// $k ?$ u* dF .$
// ^$. $$" z$ u$$$$e
// #$b $E.dW@e$" ?$
// #$ .o$$# d$$$$c ?F
// $ .d$$#" . zo$> #$r .uF
// $L .u$*" $&$$$k .$$d$$F
// $$" ""^"$$$P"$P9$
// JP .o$$$$u:$P $$
// $ ..ue$" "" $"
// d$ $F $
// $$ ....udE 4B
// #$ """"` $r @$
// ^$L '$ $F
// RN 4N $
// *$b d$
// $$k $F
// $$b $F
// $"" $F
// '$ $
// $L $
// '$ $
// $ $
</script>