ホームページ > 記事 > ウェブフロントエンド > jqueryはターゲットノードにノードを追加または移動します

jqueryはターゲットノードにノードを追加または移動します

无忌哥哥オリジナル: 2018-06-29 14:26:101315ブラウズ

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>append()</button>
<button>prepend()</button>
<button>after()</button>
<button>before()</button>
<p style="background-color: orange;width: 300px;">我是要被append()移动的节点1</li>
<p style="background-color: orange;width: 300px;">我是要被prepend()移动的节点2</li>
<p style="background-color: orange;width: 300px;">我是要被after()移动的节点3</li>
<p style="background-color: orange;width: 300px;">我是要被before()移动的节点4</li>
</body>
</html>

* 1. 挿入位置:

* 1.1: ノード内容の前後

* 1.2: ノードの前後

* 2. 挿入されるノード:

* 2.1: 新しく作成されたノードの場合: add オペレーションと呼ばれます

* 2.2: 既存のノードの場合: move オペレーションと呼ばれます

* 3. したがって、対応するメソッドが 4 つあるはずです

* 3.1: ノードのコンテンツに挿入した後: append ( )

* 3.2: ノードコンテンツに挿入する前: prepend()

* 3.3: ノードに挿入した後: after()

* 3.3: ノードに挿入する前: before() *

* 1 .append()

* 構文: target.append(content)

* パラメーター: 追加または移動するノード

* 関数: ターゲット要素のコンテンツの後に挿入

$(&#39;button&#39;).eq(0).on(&#39;click&#39;,function(){
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var li = $(&#39;<li>&#39;).css(&#39;background-color&#39;,&#39;lightgreen&#39;).html(&#39;我是append()新生成的节点1&#39;)
//第二点: 将新节点插入到目标节点内容的后面
$(&#39;ul&#39;).append(li)
//2.移动操作(请将添加操作的代码注释掉)
// $(&#39;ul&#39;).append($(&#39;p:first&#39;))
})

* 2.prepend()

* 構文: target.prepend(content)

* パラメータ: 追加または移動するノード

* 機能: ターゲット要素のコンテンツの前に挿入

$(&#39;button&#39;).eq(1).on(&#39;click&#39;,function(){
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var li = $(&#39;<li>&#39;).css(&#39;background-color&#39;,&#39;lightgreen&#39;).html(&#39;我是prepend()新生成的节点2&#39;)
//第二点: 将新节点插入到目标节点内容的后面
$(&#39;ul&#39;).prepend(li)
//2.移动操作(请将添加操作的代码注释掉)
// $(&#39;ul&#39;).prepend($(&#39;p:eq(1)&#39;))
})

* 3.after()

* 構文: target.after(content)

* パラメータ: 挿入するノード

* 機能: ターゲットノードの後ろに挿入

$(&#39;button&#39;).eq(2).on(&#39;click&#39;,function(){
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var p = $(&#39;<li>&#39;).css(&#39;background-color&#39;,&#39;lightgreen&#39;).html(&#39;我是after()新生成的节点3&#39;)
//第二点: 将新节点插入到目标节点的后面
$(&#39;ul&#39;).after(p)
// $(&#39;li:eq(1)&#39;).after(p)
//2.移动操作(请将添加操作的代码注释掉)
// $(&#39;ul&#39;).after($(&#39;p:eq(2)&#39;))
// $(&#39;li:eq(1)&#39;).after($(&#39;p:eq(2)&#39;))
})

* 4.before()

* 構文: target.after(content)

* パラメータ:挿入するノード

* 機能: 対象要素の前に挿入

$(&#39;button&#39;).eq(3).on(&#39;click&#39;,function(){
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var p = $(&#39;<li>&#39;).css(&#39;background-color&#39;,&#39;lightgreen&#39;).html(&#39;我是before()新生成的节点4&#39;)
//第二点: 将新节点插入到目标节点的后面
$(&#39;ul&#39;).before(p)
// $(&#39;li:eq(2)&#39;).before(p)
//2.移动操作(请将添加操作的代码注释掉)
// $(&#39;ul&#39;).before($(&#39;p:eq(3)&#39;))
// $(&#39;li:eq(2)&#39;).before($(&#39;p:eq(3)&#39;))
})

以上がjqueryはターゲットノードにノードを追加または移動しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

jquery append

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：vuex の紹介次の記事：vuex の紹介

続きを見る