收藏
批改状态：未批改
老师批语：
appendTo(),prependTo(),insertAfter(),insetBefore()方法演示代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery文档操作(将节点添加或移动到目标节点)</title>
<style type="text/css">
table{
border-collapse: collapse;
width: 800px;
height: 300px;
margin: 20px auto;
}
table,td,th{
border: 1px solid #555;
}
li {
list-style: none;
background-color: lightskyblue;
width: 300px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
<p style="background-color: orange;width: 300px;">我是要被appendTo()移动的节点1</li>
<p style="background-color: orange;width: 300px;">我是要被prependTo()移动的节点2</li>
<p style="background-color: orange;width: 300px;">我是要被insertAfter()移动的节点3</li>
<p style="background-color: orange;width: 300px;">我是要被insertBefore()()移动的节点4</li>
<hr>
<table>
<caption>jQuery文档操作</caption>
<tr>
<td>方法</td>
<td>appendTo()</td>
<td>prependTo()</td>
<td>insertAfter()</td>
<td>insertBefore()</td>
</tr>
<tr>
<td>语法</td>
<td>content.appendTo(target)</td>
<td>content.prepend(target)</td>
<td>content.insertAfter(target)</td>
<td>content.insertBefore(target)</td>
</tr>
<tr>
<td>参数</td>
<td>要添加或移动到的节点</td>
<td>要添加或移动到的节点</td>
<td>要插入的节点</td>
<td>要插入的节点</td>
</tr>
<tr>
<td>功能</td>
<td>插入到目标元素内容的后面</td>
<td>插入到目标元素内容的前面</td>
<td>插入到目标节点的后面</td>
<td>插入到目标元素的前面</td>
</tr>
<tr style="text-align: center;">
<td>演示</td>
<td><button>演示</button></td>
<td><button>演示</button></td>
<td><button>演示</button></td>
<td><button>演示</button></td>
</tr>
</table>
</body>
</html>
<script type="text/javascript" src="../jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button').eq(0).on('click',function(){
var li = $('<li>').css('background-color','lightgreen').html('我是appendTo()新生成的节点1')
li.appendTo($('ul'))
})
$('button').eq(1).on('click',function(){
$('p:eq(1)').prependTo($('ul'))
})
$('button').eq(2).on('click',function(){
var p = $('<li>').css('background-color','lightgreen').html('我是insertAfter()新生成的节点3')
p.insertAfter($('ul'))
})
$('button').eq(3).on('click',function(){
var p = $('<li>').css('background-color','lightgreen').html('我是insertBefore()新生成的节点4')
$('p:eq(3)').insertBefore($('li:eq(2)'))
})
</script>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
