<!DOCTYPE?html>
<html>
<head>
????<meta?http-equiv="Content-type"?content="text/html;?charset=utf-8"?/>
????<title></title>
????<script?src="http://www.xianlaiwan.cn/static/lib/jquery/1.9.1/jquery.js"></script>
????<style>
????????.left?div,
????????.right?div?{
????????????width:?100px;
????????????padding:?5px;
????????????margin:?5px;
????????????float:?left;
????????????border:?1px?solid?#ccc;
????????????background:?#bbffaa;
????????}
????????.right?div?{
????????????background:?yellow;
????????}
????????p?{
????????????border:?1px?solid?red;
????????}
????</style>
</head>
<body>
<h2>DOM包裹wrap()方法</h2>
<div?class="left">
????<button?class="aaron1">點擊,通過wrap方法給p元素增加父容器div</button>
????<button?class="aaron2">點擊,通過unwrap方法給p元素刪除父容器div</button>
????<button?class="aaron3">點擊,通過wrapAll方法給所有P元素增加父容器div</button>
????<button?class="aaron4">點擊,通過wrapInner方法給所有div元素增加內部父容器p</button>
</div>
<div?class="right">
????<p>p元素</p>
????<p>p元素</p>
</div>
<script?type="text/javascript">
????$(".aaron1").on('click',function?()?{
????????$('p').wrap('<div></div>')
????})
????$(".aaron2").on('click',function?()?{
????????$('p').unwrap('<div></div>')
????})
????$(".aaron3").on('click',function?()?{
????????$('p').wrapAll('<div></div>')
????})
????$('.aaron4').on('click',function?()?{
????????$('.right').wrapInner('<p></p>')
????})
</script>
</body>
</html>
2019-08-30
在你執行刪除方法后你把class="right"的標簽刪掉了，然而你的所有新增樣式都需要寫在 .right標簽下才會生效，方法確實生效了，只不過不在 .right 下??（如果錯誤歡迎指正）