收藏
批改状态：合格
老师批语：
jQuery 文档操作方法appendTo()/prependTo()/insertAfter()/insertBefore()方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>1.appendTo()方法</h2>
<h3>定义和用法</h3>
<span>appendTo()方法在被选元素的结尾(仍然在内部)插入指定内容</span>
<p>这是P段落原来文本内容</p>
<button>appendTo()方法</button> <button>appendTo()方法移动</button>
<small style="color: blue">,这是appendTo需要移动的内容</small>
<hr>
<h2>2.prependTo()方法</h2>
<h3>定义和用法</h3>
<span>prependTo() 方法在被选元素的开头(仍位于内部)插入指定内容。</span>
<p>这是P段落原来文本内容</p>
<button>appendTo()方法</button> <button>appendTo()方法移动</button>
<small style="color: blue">这是prependTo需要移动的内容,</small>
<hr>
<h2>3.insertAfter()方法</h2>
<h3>定义和用法</h3>
<span>insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素。</span>
<p><span>孙悟空</span><span>白骨精</span></p>
<button>insertAfter()方法</button> <button>insertAfter()方法移动</button>
<small style="color: blue">拥抱起了</small>
<hr>
<h2>4.insertBefore()方法</h2>
<h3>定义和用法</h3>
<span>insertBefore() 方法在被选元素之前插入 HTML 标记或已有的元素。</span>
<p><span>山上有座庙，</span><span>庙里有个老和尚</span></p>
<button>insertBefore()方法</button> <button>insertBefore()方法移动</button>
<small style="color: blue">从前，</small>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('button').eq(0).click(function(){
$('<strong>')
.text(',这是appendTo添加的文本内容')
.css('color','red')
.appendTo('p:eq(0)')
})
$('button').eq(1).click(function(){
$('small:eq(0)').appendTo('p:eq(0)')
})
$('button').eq(2).click(function(){
$('<strong>')
.text('这是prependTo方法添加的内容,')
.css('color','red')
.prependTo('p:eq(1)')
})
$('button').eq(3).click(function(){
$('small:eq(1)').prependTo('p:eq(1)')
})
$('button').eq(4).click(function(){
$('<strong>')
.text('三打')
.css('color','red')
.insertAfter('span:eq(3)')
})
$('button').eq(5).click(function(){
$('small:eq(2)').insertAfter('span:eq(3)')
})
$('button').eq(6).click(function(){
$('<strong>')
.text('从前，')
.css('color','red')
.insertBefore('span:eq(6)')
})
$('button').eq(7).click(function(){
$('small:eq(3)').insertBefore('span:eq(6)')
})
</script>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
