요소 삽입을 위한 jQuery와 JavaScript 노드 방법 비교

2. 요소 삽입:

<div>
<p>面朝大海，春暖花开</p>
</div>

(1), jQuery 방식

1. >

구체적인 구현은 다음과 같습니다.

$("div").append("<p>这是append()方法添加的内容</p>");//在div元素下第一个子节点位置插入段落
$("div").prepend("<p>这是prepend()方法添加的内容</p>");//在div元素下最后一个子节点位置插入段落

다음 두 가지 방법이 더 적합합니다. 사람들의 일반적인 생각이지만 효과는 같습니다

$("<p>这是appendTo方法添加的内容</p>").appendTo("div");//把段落插到div元素的第一个子节点位置
$("<p>这是prependTo方法添加的内容</p>").prependTo("div");//把段落插到div元素的最后一个子节点位置

2. 노드 외부에 삽입:

구체적인 구현은 다음과 같습니다.

$("div").after("<p>这是after()方法添加的内容</p>");//在div元素后面插入段落
$("div").before("<p>这是before()方法添加的内容</p>");//在div元素前面插入段落

$("div").after("<p>这是after()方法添加的内容</p>");//在div元素后面插入段落
$("div").before("<p>这是before()方法添加的内容</p>");//在div元素前面插入段落

3.appendTo(), prependTo(), insertBefore(), insertAfter() 메소드는 파괴적인 작업 특성을 가지고 있습니다. 즉, 기존 컨텐츠를 선택하여 지정된 객체에 삽입하면 컨텐츠가 원래 위치에서는 삭제됩니다. 다음 예에서는 원본 div 요소에 포함된 단락 텍스트가 선택되어 div 요소 뒤로 이동됩니다. 데모는 다음과 같습니다:

$("p").insertAfter("div");

(2) JavaScript 메소드

1 . 노드 내부에 삽입: appendChild()---jQuery의 Append()에 해당하고, insertBefore()---JQuery에서 prepend()

에 해당합니다. 구체적인 효과는 위의 jQuery 메서드를 참조하세요. . .