innerHTMl

last-endcode · last-endcode · commit 6859160986a4 · 2020-10-27T14:33:09.000+07:00
diff --git a/16_innerHTML_textContent.js b/16_innerHTML_textContent.js
@@ -0,0 +1,22 @@
+// innerHTML
+
+const theContainer = document.querySelector('.container');
+
+const NewElement = document.createElement('p');
+NewElement.innerText = 'Lorem ipsum';
+theContainer.appendChild(NewElement);
+
+// u can change text use innerHTML with tag html
+NewElement.innerHTML = `<ul>
+<li>SHP</li>
+<li>RHP</li>
+<li>Marine Ford</li>
+</ul>`;
+
+// but if use textContent not work
+// if use syntax HTML and will display syntax html
+// NewElement.textContent = `<ul>
+// <li>SHP</li>
+// <li>RHP</li>
+// <li>Marine Ford</li>
+// </ul>`;
diff --git a/index.html b/index.html
@@ -130,10 +130,20 @@ <h2 class="shp">The Pirates of SHP</h2>
       <h2 class="shp">The Pirates of SHP</h2>
     </div> -->
 
-    <!-- remove , removeChild -->
+    <!-- remove , removeChild
     <h2>Hello World</h2>
     <div class="container">
       <h2>On container</h2>
+    </div> -->
+
+    <!-- innerHTML & textContent
+    <div class="container">
+      <h1>Hello World</h1>
+    </div> -->
+
+    <div class="container">
+      <h3>The Pirates</h3>
+      <button class="btn">Join</button>
     </div>
     <!-- source js -->
     <!-- <script src="/01_getElementById.js"></script> -->
@@ -150,6 +160,8 @@ <h2>On container</h2>
     <!-- <script src="/12_createElement_textnode_appendChild.js"></script> -->
     <!-- <script src="/13_insertBefore.js"></script> -->
     <!-- <script src="/14_innerText_prepend.js"></script> -->
-    <script src="/15_remove_removeChild.js"></script>
+    <!-- <script src="/15_remove_removeChild.js"></script> -->
+    <!-- <script src="/16_innerHTML_textContent.js"></script> -->
+    <script src="/17.addEventListener.js"></script>
   </body>
 </html>
