집 >웹 프론트엔드 >JS 튜토리얼 >DOM 노드 내부에 삽입하는 일반적인 방법

DOM 노드 내부에 삽입하는 일반적인 방법

一个新手원래의: 2017-09-30 09:45:481679검색

1. 동적으로 생성된 요소를 DOM에 삽입하는 것만으로는 충분하지 않으며, 메모리에 일시적으로 저장되며 궁극적으로 페이지 문서에 넣어 표시해야 합니다. 그렇다면 문제는 문서에 어떻게 넣을 것인가 하는 것입니다.

여기에는 새로 생성된 요소를 페이지의 특정 요소의 하위 요소로 삽입하는 것이 일반적입니다. 이러한 처리를 위해 jQuery는 두 가지 작업 방법을 정의합니다.

Selectorappend()appendTo() 일치하는 모든 Append 요소를 지정된 다른 요소에 넣습니다. element collectionappend: 이 작업은 문서에 추가하기 위해 지정된 요소에 대해 기본appendChild 메서드를 실행하는 것과 유사합니다.

Description
	콘텐츠 추가 또는 일치하는 각 요소에 하위 노드 추가

appendTo: 실제로 이 방법을 사용하면 기존의 $(A).append(B) 작업이 반전됩니다. 즉, B를 A에 추가하는 대신 A가 B에 추가됩니다.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .content {
        width: 300px;
    }
    .append{
        background-color: blue;
    }
    .appendTo{
        background-color: red;
    }
    </style></head><body>
    <h2>通过append与appendTo添加元素</h2>
    <button id="bt1">点击通过jQuery的append添加元素</button>
    <button id="bt2">点击通过jQuery的appendTo添加元素</button>

    <p class="content"></p>

    <script type="text/javascript">

        $("#bt1").on(&#39;click&#39;, function() {            //.append(), 内容在方法的后面，
            //参数是将要插入的内容。            
            $(".content").append(&#39;<p class="append">通过append方法添加的元素</p>&#39;)
        })    </script>
    <script type="text/javascript">
        $("#bt2").on(&#39;click&#39;, function() {            //.appendTo()刚好相反，内容在方法前面，
            //无论是一个选择器表达式 或创建作为标记上的标记
            //它都将被插入到目标容器的末尾。            
            $(&#39;<p class="appendTo">通过appendTo方法添加的元素</p>&#39;).appendTo($(".content"))
        })    
 </script>
 </body>
 </html>

간단한 요약:

　 .append() 및 .appendTo()는 동일한 기능을 가지고 있지만 주요 차이점은 구문 - 콘텐츠 및 대상의 위치

append()前面是被插入的对象，后面是要在对象内插入的元素内容
appendTo()前面是要插入的元素内容，而后面是被插入的对象

2. 내부 DOM 삽입 prepend() 및 prependTo()

요소 내부에서 작동하는 메서드 Append 및 AppendTo를 통해 선택한 요소의 끝(여전히 내부)에 지정된 내용을 삽입하는 것 외에도 선택한 요소 앞에 삽입할 수도 있습니다. jQuery에서 제공하는 메서드는 prepend와 prependTo입니다.

Selectorprepend()pre 보류() 일치하는 모든 요소를 지정된 요소 세트 앞에 추가합니다. prepend와 prependTo의 사용법 및 차이점

Description

선택한 요소의 시작 부분에 콘텐츠 삽입

팁: 는 반대입니다. prepend()

<span style="color: #000000">.prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()).<br>.prepend()和.prependTo()实现同样的功能，主要的不同是语法，插入的内容和目标的位置不同<br>对于.prepend() 而言，选择器表达式写在方法的前面，作为待插入内容的容器，将要被插入的内容作为方法的参数<br>而.prependTo() 正好相反，将要被插入的内容写在方法的前面，可以是选择器表达式或动态创建的标记，待插入内容的容器作为参数。<br><br></span>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .aaron1{
        border: 1px solid red;
    }
    .aaron1 p {
        color: red;
    }
    .aaron2{
        border: 1px solid blue;
    }
    .aaron2 p {
        color: blue;
    }
    </style></head><body>
    <h2>通过prepend与prependTo添加元素</h2>
    <button id="bt1">点击通过jQuery的prepend添加元素</button>
    <button id="bt2">点击通过jQuery的prependTo添加元素</button>
    <p class="aaron1">
        <p>测试prepend</p>
    </p>
    <p class="aaron2">
        <p>测试prependTo</p>
    </p>
    <script type="text/javascript">
    $("#bt1").on(&#39;click&#39;, function() {        //找到class="aaron1"的p节点
        //然后通过prepend在内部的首位置添加一个新的p节点        $(&#39;.aaron1&#39;)
            .prepend(&#39;<p>prepend增加的p元素</p>&#39;)
    })    </script>
    <script type="text/javascript">
    $("#bt2").on(&#39;click&#39;, function() {        //找到class="aaron2"的p节点
        //然后通过prependTo内部的首位置添加一个新的p节点        $(&#39;<p>prependTo增加的p元素</p>&#39;)
            .prependTo($(&#39;.aaron2&#39;))
    })    
    </script>
   </body>
 </html>

다음은 네 가지 내부 작업 방법의 차이점을 요약한 것입니다.

append()向每个匹配的元素内部追加内容
prepend()向每个匹配的元素内部前置内容
appendTo()把所有匹配的元素追加到另一个指定元素的集合中
prependTo()把所有匹配的元素前置到另一个指定的元素集合中

위 내용은 DOM 노드 내부에 삽입하는 일반적인 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：js의 체크박스에서 여러 값을 선택하는 방법다음 기사：js의 체크박스에서 여러 값을 선택하는 방법