03_js-dom/uebungen/u17_tasse-01001/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -101,10 +101,37 @@
         // Verändere die Produktseite der Binär-Tasse mithilfe von JavaScript.
 
         // Füge noch einmal den folgenden Listenpunkt zur Liste der Product Specifications hinzu:
+        const li = document.createElement('li');
+        li.textContent = 'Capacity: 11 oz.';
 
         // Capacity: 11 oz.
 
         // Füge den Listenpunkt aber dieses Mal nicht am Ende der Liste ein, sondern vor dem Eintrag Materials: Ceramic.
+
+        $('#product_specification').insertBefore(li, $$('#product_specification li')[4]);
+
+        $$('#product_specification li')[4].before(li);
+
+        // DOM Traversal Befehle
+        document
+          .getElementById('product_specification')
+          .lastElementChild //
+          .previousElementSibling.before(li);
+
+        document.getElementById('product_specification').children[4].before(li);
+
+        // Element suchen
+        const foundListItem = $$('#product_specification li').find((el) => {
+          return el.textContent.trim().includes('Materials: Ceramic');
+        });
+
+        foundListItem && foundListItem.before(li);
+
+        const foundListItemIdx = $$('#product_specification li').findIndex((el) => {
+          return el.textContent.trim().includes('Materials: Ceramic');
+        });
+
+        foundListItemIdx !== -1 && $(`#product_specification li:nth-child(${foundListItemIdx} )`).before(li);
       }
     </script>
   </body>