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

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -103,7 +103,18 @@
         // 1. Füge in der Liste der Product Specifications mithilfe von JavaScript folgenden Listenpunkt hinzu:
         // Capacity: 11 oz.
 
+        const newItem = document.createElement('li');
+        newItem.textContent = 'Capacity: 11 oz.';
+        const listProductSpecification = $('#product_specification');
+        listProductSpecification.append(newItem);
+
         // 2. Erweitere die Select-Box neben dem buy-Button mithilfe von JavaScript um den Eintrag: 5 items.
+
+        const formBuy = $('#buy_form');
+        const selectEl = formBuy.querySelector('select');
+        const newOption = document.createElement('option');
+        newOption.textContent = '5 items';
+        selectEl.append(newOption);
       }
     </script>
   </body>

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

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -101,8 +101,15 @@
         // Verändere erneut die Produktseite der Binär-Tasse mithilfe von JavaScript. Du kannst auch hier wieder die JS-Konsole verwenden.
 
         // 1. Entferne die Überschrift Description mit der remove-Methode.
+        // Die erste h2-Überschrift im main-Bereich ist Description.
+        $('main h2').remove();
+        // $('main h2').parentNode.removeChild($('main h2'))
 
         // 2. Entferne mit der remove-Methode den Text "010010000100111101010100" aus der Hauptüberschrift.
+        // Der Binärtext steht in einem eigenen span innerhalb der Hauptüberschrift.
+
+        $('h1.article .keyword').remove();
+        // $('h1.article .keyword').parentNode.removeChild($('h1.article .keyword'));
       }
     </script>
   </body>

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>