createElement() createTextNode() appendChild()

last-endcode · last-endcode · commit ec8b66a4680f · 2020-10-26T15:01:42.000+07:00
diff --git a/12_createElement_textnode_appendChild.js b/12_createElement_textnode_appendChild.js
@@ -0,0 +1,14 @@
+// createElement('element)
+// createTextNode('text content')
+// element.appendChild(childElement)
+
+const container = document.querySelector('.container');
+
+// create emptyElement
+const newH2 = document.createElement('h2');
+const textShp = document.createTextNode('The history of shp');
+// appendChild text to element
+// and element apply to browser
+newH2.appendChild(textShp);
+newH2.classList.add('red', 'text');
+container.appendChild(newH2);
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>DOM</title>
     <style>
-      .colors {
+      /* .colors {
         color: white;
         background: red;
         padding: 0.35rem 0.75rem;
@@ -14,6 +14,21 @@
 
       .text {
         text-transform: uppercase;
+      } */
+
+      .red {
+        colors: white;
+        background: red;
+      }
+
+      .blue {
+        colors: blue;
+        background: blue;
+      }
+
+      .text {
+        font-size: 1.25rem;
+        text-transform: uppercase;
       }
     </style>
   </head>
@@ -86,9 +101,9 @@ <h2>The Pirates</h2>
       <li>marine ford</li>
     </ul> -->
 
-    <!-- textContent and childNodes -->
+    <!-- textContent and childNodes
     <h3>Hello people</h3>
-    <h2>Hello World</h2>
+    <h2>Hello World</h2> -->
 
     <!-- getAttribute, setAttribute
     <div class="container">
@@ -105,6 +120,10 @@ <h2 class="first">first element</h2>
     <h2 class="second">second element</h2>
     <h2 class="third">third element</h2> -->
 
+    <!-- createElement, createTextNode , appendChild -->
+    <div class="container">
+      <h2>The Pirates of SHP</h2>
+    </div>
     <!-- source js -->
     <!-- <script src="/01_getElementById.js"></script> -->
     <!-- <script src="/02_getElementByTagName.js"></script> -->
@@ -114,8 +133,9 @@ <h2 class="third">third element</h2> -->
     <!-- <script src="/06_parentElement.js"></script> -->
     <!-- <script src="/07_nextSibling_previous.js"></script> -->
     <!-- <script src="/08_nextElementSibling_previous.js"></script> -->
-    <script src="/09_textContent.js"></script>
+    <!-- <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>
   </body>
 </html>
