ホームページ > 記事 > ウェブフロントエンド > jqueryノードをターゲットノードに追加または移動します
jqueryノードをターゲットノードに追加または移動します
- 无忌哥哥オリジナル
- 2018-06-29 14:33:091924ブラウズ
jqueryは対象ノードにノードを追加または移動します
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>将节点添加或移动到目标节点</title>
<style type="text/css">
li {
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>
<button>appendTo()</button>
<button>prependTo()</button>
<button>insertAfter()</button>
<button>insertBefore()</button>
<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>
</body>
</html>* 1. 挿入位置:
* 1.1: ノード内容の前後
* 1.2: ノードの前後
* 2. 挿入されるノード:
* 2.1: 新しく作成されたノードの場合: add オペレーションと呼ばれます
* 2.2: 既存のノードの場合: move オペレーションと呼ばれます
* 3. したがって、対応するメソッドが 4 つあるはずです
* 3.1: ノードのコンテンツを挿入した後: appendTo( )
* 3.2: ノードのコンテンツに挿入する前: prependTo()
* 3.3: ノードに挿入した後: InsertAfter()
* 3.3: ノードに挿入する前: InsertBefore() *
* 1. appendTo()
* 構文: content.appendTo(target)
* パラメーター: 追加または移動するノード
* 機能: ターゲット要素のコンテンツの後ろに挿入
$('button').eq(0).on('click',function(){
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var li = $('<li>').css('background-color','lightgreen').html('我是appendTo()新生成的节点1')
//第二点: 将新节点插入到目标节点内容的后面
li.appendTo($('ul'))
//2.移动操作(请将添加操作的代码注释掉)
// $('p:first').appendTo($('ul'))
})* 2.prependTo()
* 構文: content .prepend(target)
* パラメーター: 追加または移動するノード
* 機能: ターゲット要素のコンテンツの前に挿入します
$('button').eq(1).on('click',function(){
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
// var li = $('<li>').css('background-color','lightgreen').html('我是prependTo()新生成的节点2')
//第二点: 将新节点插入到目标节点内容的后面
// li.prependTo($('ul'))
//2.移动操作(请将添加操作的代码注释掉)
$('p:eq(1)').prependTo($('ul'))
})* 3.insertAfter()
* 構文: content.after(target)
* パラメータ: 挿入するノード
* 関数: ターゲットノードの後ろに挿入
$('button').eq(2).on('click',function(){
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var p = $('<li>').css('background-color','lightgreen').html('我是insertAfter()新生成的节点3')
//第二点: 将新节点插入到目标节点的后面
p.insertAfter($('ul'))
// p.insertAfter($('li:eq(1)'))
//2.移动操作(请将添加操作的代码注释掉)
////移动到<ul>之后
// $('p:eq(2)').insertAfter($('ul'))
// //移动到第2个<li>之后
// $('p:eq(2)').insertAfter($('li:eq(1)'))
})* 4.InsertBefore()
* 構文: content.insertBefore(target)
* パラメータ: 挿入するノード
* 機能: 対象要素の前に挿入
$('button').eq(3).on('click',function(){
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var p = $('<li>').css('background-color','lightgreen').html('我是insertBefore()新生成的节点4')
//第二点: 将新节点插入到目标节点的后面
// p.insertBefore($('ul'))
//插入到第3个<li>之前
// p.insertBefore($('li:eq(2)'))
//2.移动操作(请将添加操作的代码注释掉)
//移动到<ul>之前
// $('p:eq(3)').insertBefore($('ul'))
//移动到第3个<li>之前
$('p:eq(3)').insertBefore($('li:eq(2)'))
})以上がjqueryノードをターゲットノードに追加または移動しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。