Common methods for inserting inside DOM nodes-JS Tutorial-php.cn

Common methods for inserting inside DOM nodes

一个新手

Release： 2017-09-30 09:45:48

Original

1597 people have browsed it

1. Inserting append() and appendTo() inside the DOM

It is not enough to dynamically create elements. It is only temporarily stored in memory. Ultimately we need to put it into the page document and present it. So the question is, how to put it in the document?

This involves a positional relationship. It is common to put this newly created element inside it as a child element of a certain element on the page. For such processing, jQuery defines two operation methods.

Selector	Description
append()	Append content to each matching elementOr append child nodes
appendTo()	Append all matching elements To another specified element collection

append: This operation is similar to executing the native appendChild method on the specified elements to add them to the document. .

appendTo: In fact, using this method reverses the conventional $(A).append(B) operation, that is, instead of appending B to A, appending A to 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>

Copy after login

Simple summary:

The two methods .append() and .appendTo() have the same function. The main difference is the syntax - content and The position of the target is different

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

Copy after login

2. Insert prepend() and prependTo() inside the DOM

Methods to operate inside the element, except when selected In addition to inserting specified content at the end of the element (still inside) through append and appendTo, you can also insert it before the selected element. The methods provided by jQuery are prepend and prependTo.

##prepend()prependTo()##prepend The use and difference between prependTo:

Selector

Description

Insert content at the beginning of the selected element

Prepend all matching elements into the specified element collection

Tips: is the reverse

prepend()

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

Copy after login

<!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>

Copy after login

Here is a summary of the differences between the four internal operation methods:

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

Copy after login

The above is the detailed content of Common methods for inserting inside DOM nodes. For more information, please follow other related articles on the PHP Chinese website!