ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added tag26

Browse Source
This commit is contained in:
Philippe Torrel
2026-07-20 09:55:44 +02:00
parent d0d53a1b3d
commit 0a69891333
12 changed files with 404 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
03_dom/uebungen/u15_tasse-01001/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
@@ -97,13 +97,38 @@
const $ = (qs) => document.querySelector(qs);
const $$ = (qs) => Array.from(document.querySelectorAll(qs));
const productList = $('#product_specification');
const orderedList = $('.model');
const selectBox = $('#buy_form select');
// Übung 15: — Teil 7
// Verändere die Produktseite der Binär-Tasse mithilfe von JavaScript. Du kannst wieder die JS-Konsole verwenden.
// 1. Füge in der Liste der Product Specifications mithilfe von JavaScript folgenden Listenpunkt hinzu:
// Capacity: 11 oz.
$('#product_specification').innerHTML += '<li>Capacity: 11 oz.</li>';
const newListItem = document.createElement('li');
newListItem.textContent = 'Capacity: 11 oz.';
newListItem.style.color = 'orange';
newListItem.style.backgroundColor = 'black';
productList.appendChild(newListItem); //productList.append(newListItem)
// 2. Erweitere die Select-Box neben dem buy-Button mithilfe von JavaScript um den Eintrag: 5 items.
const newOption = document.createElement('option');
newOption.textContent = '5 items';
selectBox.append(newOption);
// newOption.style.textContent = 'red';
$('#buy_form select').innerHTML += '<option>5 items</option>';
// optional Listenpunkt in ordered List (.model) hinzugefügt
const listItem2 = document.createElement('li');
listItem2.textContent = 'fuente item hinzugefügt als Newitem';
listItem2.style.color = 'orange';
listItem2.style.backgroundColor = 'black';
orderedList.append(listItem2);
}
</script>
</body>

8
03_dom/uebungen/u16_tasse-01001/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
@@ -101,8 +101,14 @@
// 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.
const firstH2El = $('h2');
firstH2El.remove(); // IE 11
// firstH2El.parentNode.removeChild(firstH2El)
// 2. Entferne mit der remove-Methode den Text "010010000100111101010100" aus der Hauptüberschrift.
const remSpan0100 = $('h1.article > span.keyword'); // $('h1 .keyword');
remSpan0100.remove();
// remSpan0100.parentNode.removeChild(remSpan0100);
}
</script>
</body>

30
03_dom/uebungen/u17_tasse-01001/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
@@ -105,6 +105,34 @@
// Capacity: 11 oz.
// Füge den Listenpunkt aber dieses Mal nicht am Ende der Liste ein, sondern vor dem Eintrag Materials: Ceramic.
const list = $('#product_specification');
const item5 = $$('#product_specification li')[4];
// const listItem5 = $('#product_specification li:nth-child(5)');
// const listItem5 = $('#product_specification').lastElementChild.previousElementSibling; // DOM Traversal
console.log(item5);
const newList = document.createElement('li');
newList.textContent = 'Capacity: 11 oz.';
list.insertBefore(newList, item5);
// ======================
const prodSpecEl = $('#product_specification');
const prodSpecLiEls = $$('#product_specification li');
// einzufügenden Listenpunkt erstellen
const liCapacity = document.createElement('li');
liCapacity.textContent = 'Capacity: 11 oz.';
// Nu suchen an welcher Stelle - also den listenpunkt mit dem text Materials: Ceramic
const refLi = prodSpecLiEls.find((el) => {
return el.textContent === 'Materials: Ceramic';
});
// und einfügen
prodSpecEl.insertBefore(liCapacity, refLi);
}
</script>
</body>