Dodawanie elementów do listy js

pytanie zadane 8 lipca 2019 w JavaScript przez xFanti Obywatel (1,350 p.)

Hejka, chciałem zrobić prostą stronę do dodawania listy zakupów. Stworzyłem funkcje jednak dodaje ona puste <li>.

Co muszę poprawić żeby to poprawnie działało

<!DOCTYPE html>
<html>
<head>
	<title>LIST ZAKUPOW</title>

<script>




function dodanie(){

var tekst = document.getElementById('pole1').textContent;
//tworzenie elementu li

var newElement = document.createElement('li');

//tworzenie tekstu

var newText = document.createTextNode(tekst);

//polaczenie tekstu do elementu

newElement.appendChild(newText);

//wyszukanie miejsca

var position = document.getElementsByTagName('ul')[0];

//wstawienei

position.appendChild(newElement);

}
</script>


</head>
<body>


<h1>List twoich zakupow</h1>


<form>
	
<input type="text"   id="pole1">
<input type="button" name="przycisk" value="dodaj do listy" onclick="dodanie()">



</form>

<ul>
	
<li>Ogórki kiszone</li>
<li>Buraki</li>
<li>Ziemniaki</li>


</ul>

</body>
</html>

1 odpowiedź

odpowiedź 8 lipca 2019 przez Kamil Łydka Stary wyjadacz (13,600 p.)
wybrane 8 lipca 2019 przez xFanti

Najlepsza

Wartość z inputa odczytaj za pomocą atrybutu .value

document.getElementById('pole1').value

potem elementowi który sobie stworzyłeś podaj

newElement.innerHTML = tekst;

ewentualnie tak jak chciałeś czyli za pomocą createTextNode i appendChild, ale kluczowe jest to żebyś z inputa pobierał wartość za pomocą .value

komentarz 8 lipca 2019 przez xFanti Obywatel (1,350 p.)

ok działa :D

możesz mi wytłumaczyć czemu nie działa textContent z tego co czytałem to on też chyba pobiera zawartość

komentarz 8 lipca 2019 przez Chess Szeryf (76,710 p.)
edycja 8 lipca 2019 przez Chess

Jest tak, dlatego że właściwość value dotyczy danych przeważnie z formularza. Wiele elementów DOM ma różniący się od siebie interface DOM. Poczytaj w3.org, w3.org, w3.org.

komentarz 8 lipca 2019 przez Kamil Łydka Stary wyjadacz (13,600 p.)

Pisząc prostym językiem i trochę uproszczając, to wartość z inputów znajduje się w atrybucie value. Wartość inputa nie jest jakby zagnieżdżona/wpisana w DOM.Jeśli spytałbyś o jakiś paragraf (znacznik <p> </p>), to już dostałbyś wartość która faktycznie leży wewnątrz tych znaczników. Choć i tak w większości przypadków zaleca się częściej używać innerHTML niż textContent, różnice wynikają głównie z renderowania,ale na początkowym etapie ta wiedza Ci się nie przyda.

Wartości z inputów chowają się tak:

<input type="text" value="jakas wartosc" />

,a nie na przykład tak:

<p id="cosTam"> jakiś tekst </p>

document.getElementById("cosTam").innerHTML

1	komentarz 8 lipca 2019 przez xFanti Obywatel (1,350 p.) dzięki za wytłumaczenie Właśnie w książce którą przerabiam zalecane bardziej jest używanie textcontent niż innerHTML, ale to pewnie w praktyce wychodzi :D

komentarz 8 lipca 2019 przez Kamil Łydka Stary wyjadacz (13,600 p.)

Hmm, ogólnie textContent jest szybszy, ale on renderuje tylko tekst, kiedy innerHTML jest renderowany jako HTML. Więc w sumie w tym przypadku jeśli chcesz tylko i wyłącznie dodać tekst, to w teorii faktycznie textContent może być lepszy. Dzięki