insertBefore()

last-endcode · last-endcode · commit dd743ed73ac6 · 2020-10-26T15:49:36.000+07:00
diff --git a/13_insertBefore.js b/13_insertBefore.js
@@ -0,0 +1,17 @@
+// createElement('element)
+// createTextNode('text content')
+// element.appendChild(childElement)
+// insertBefore('element','location') -> not child
+
+const container = document.querySelector('.container');
+const shp = document.querySelector('.shp');
+
+// rhp
+const rhp = document.createElement('h2');
+const title = document.createTextNode('The Pirates of RHP');
+rhp.appendChild(title);
+rhp.classList.add('blue');
+shp.classList.add('red');
+// insertBefore
+// rhp is element, and shp is location after rhp
+container.insertBefore(rhp, shp);
diff --git a/index.html b/index.html
@@ -122,7 +122,7 @@ <h2 class="third">third element</h2> -->
 
     <!-- createElement, createTextNode , appendChild -->
     <div class="container">
-      <h2>The Pirates of SHP</h2>
+      <h2 class="shp">The Pirates of SHP</h2>
     </div>
     <!-- source js -->
     <!-- <script src="/01_getElementById.js"></script> -->
@@ -136,6 +136,7 @@ <h2>The Pirates of SHP</h2>
     <!-- <script src="/09_textContent.js"></script> -->
     <!-- <script src="/10_getAttribute.js"></script> -->
     <!-- <script src="/11_className-classList.js"></script> -->
-    <script src="/12_createElement_textnode_appendChild.js"></script>
+    <!-- <script src="/12_createElement_textnode_appendChild.js"></script> -->
+    <script src="/13_insertBefore.js"></script>
   </body>
 </html>
