집 > 기사 > 웹 프론트엔드 > 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 : 새로 생성된 노드의 경우: 추가 작업 호출

* 2.2: 기존 노드의 경우: 이동 작업 호출

* 3. 따라서 해당하는 4개의 메서드가 있어야 합니다

* 3.1: 노드 콘텐츠를 삽입한 후:appendTo( )

* 3.2: 노드에 내용을 삽입하기 전: prependTo()

* 3.3: 노드에 삽입한 후: InsertAfter()

* 3.3: 노드에 삽입하기 전: InsertBefore() *

* 1. appendTo()

* 구문: content.appendTo(target)

* 매개변수: 추가하거나 이동할 노드

* 기능: 대상 요소의 콘텐츠 뒤에 삽입

$(&#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;我是appendTo()新生成的节点1&#39;)
//第二点: 将新节点插入到目标节点内容的后面
li.appendTo($(&#39;ul&#39;))
//2.移动操作(请将添加操作的代码注释掉)
// $(&#39;p:first&#39;).appendTo($(&#39;ul&#39;))
})

* 2.prependTo()

* 구문: content .prepend(target)

* 매개변수: 추가하거나 이동할 노드

* 기능: 대상 요소의 콘텐츠 앞에 삽입

$(&#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;我是prependTo()新生成的节点2&#39;)
//第二点: 将新节点插入到目标节点内容的后面
// li.prependTo($(&#39;ul&#39;))
//2.移动操作(请将添加操作的代码注释掉)
$(&#39;p:eq(1)&#39;).prependTo($(&#39;ul&#39;))
})

* 3.insertAfter()

* 구문: content.after(target)

* 매개변수: 삽입할 노드

* 기능: 대상 노드 뒤에 삽입

$(&#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;我是insertAfter()新生成的节点3&#39;)
//第二点: 将新节点插入到目标节点的后面
p.insertAfter($(&#39;ul&#39;))
// p.insertAfter($(&#39;li:eq(1)&#39;))
//2.移动操作(请将添加操作的代码注释掉)
////移动到<ul>之后
// $(&#39;p:eq(2)&#39;).insertAfter($(&#39;ul&#39;))
// //移动到第2个<li>之后
// $(&#39;p:eq(2)&#39;).insertAfter($(&#39;li:eq(1)&#39;))
})

* 4.InsertBefore()

* Syntax: content.insertBefore(target)

* 매개변수 : 삽입할 노드

* 기능: 대상 요소 앞에 삽입

$(&#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;我是insertBefore()新生成的节点4&#39;)
//第二点: 将新节点插入到目标节点的后面
// p.insertBefore($(&#39;ul&#39;))
//插入到第3个<li>之前
// p.insertBefore($(&#39;li:eq(2)&#39;))
//2.移动操作(请将添加操作的代码注释掉)
//移动到<ul>之前
// $(&#39;p:eq(3)&#39;).insertBefore($(&#39;ul&#39;))
//移动到第3个<li>之前
$(&#39;p:eq(3)&#39;).insertBefore($(&#39;li:eq(2)&#39;))
})

위 내용은 jquery는 노드를 대상 노드에 추가하거나 이동합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

jquery

성명：

이전 기사：vue를 사용하여 앱 스캐폴딩 도구를 빠르게 개발하는 방법다음 기사：vue를 사용하여 앱 스캐폴딩 도구를 빠르게 개발하는 방법