Change the structure of the document methods (five kinds)

1. On the rearmost element of the additional sub-elements

Syntax: parent element .appendChild (child element object)

Case:

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 
 7     <style>
 8         .main{
 9             width: 600px;
10             height: 300px;
11             margin: 0 auto;
12             display: flex;
13             background-color: #5d656b;
14         }
15         .child{
16             width: 200px;
17             height: 400px;
18             text-align: center;
19         }
20         .c1{
21             background-color:#e8e318;
22         }
23         .c2{
24             background-color: darkgoldenrod;
25         }
26         .c3{
27             background-color: chartreuse;
28         }
29         #d1{
30             width: 200px;
31             height: 300px;
32         }
33 
34     </style>
35 
36 </head>
37 <body>
38 
39     <h1> Click on the appropriate classification beauty </ h1 of > 
40      < IMG the src = "IMG / 12347.jpg" ID = "D1" /> 
41 is  
42 is      < div class = "main" > 
43 is          < div class = "Child C1" > girl </ div > 
44 is          < div class = "Child C2" > LORI </ div > 
45          < div class = "C3 Child" > Royal women </div>
46     </div>
47 
48     <script type="application/javascript">
49         var main=document.querySelector(".main")
50         var h1=document.querySelector("h1")
51         var d1=document.querySelector("#d1")
52 
53         main.onclick=function(e){
54             console.log(e)
55             e.target.appendChild(d1)
56         }
57 
58     </script>
59 
60 
61 </body>
62 </html>

2. What are the elements in front of the additional element

Syntax: parent element .insertBefore (insert element object, reference object)

Case:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <ul>
        <li class="l1">
            <h1>美女类型1</h1>
        </li>
        <li class="l2">
            beauty Type 2>H1 of<</h1>
        </li>
        <li class="l3">
            <h1>美女类型3</h1>
        </li>
    </ul>

    <script type="application/javascript">

        var girl=document.createElement("img")
        girl.src="img/12347.jpg"
        girl.style.width="200px"
        girl.style.height="atuo"

        var l2=document.querySelector(".l2")
        var h1=document.querySelector(".l2 h1")

        l2.insertBefore(girl,h1)


    </script>
</body>
</html>

3. Replace element

Syntax: parent element .replaceChild (alternative element object, the object is replaced with the element)

Case:

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div class="main">
 9         <img src="img/1232.jpg" class="oldimg"/>
10     </div>
11 
12     <script type="application/javascript">
13         var oldimg=document.querySelector(".oldimg")
14         var main=document.querySelector(".main")
15         var newimg=document.createElement("img")
16         newimg.src="img/12347.jpg"
17 
18         main.replaceChild(newimg,oldimg)
19 
20 
21     </script>
22 </body>
23 </html>

4. Removing elements

Syntax: parent element .removeChild (delete element object)

Case:

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <h1>helloworld</h1>
 9 
10     <script type="application/javascript">
was1211 
         h1 = document.querySelector ( " h1 " )
 13          // document.body.removeChild (h1) 
14  
15          // convenient way to delete elements of the object 
16          // syntax: element object .parentElement.removeChild (Object element) 
17          h1.parentElement .removeChild (h1 of)
 18 is  
. 19      </ Script > 
20 is  </ body > 
21 is  </ HTML >

5. Create element

Syntax: document.createElement ( "tag name of the element object")

Note: Creating an element does not show on the page, we need above qppendChild, insertBefore, either to complete replaceChild inserted into the page structure

Change the structure of the document methods (five kinds)

Guess you like