JS jak dodać kilka divów w innym divie.

Question

Witam.

Mój problem polega na tym , że nie umiem sobie poradzić jak wsadzić parę divów do innego diva. Dla rozjaśnienia sprawy dam ss.

Tak to wygląda teraz

A chcę aby wyglądało to tak

Używam tutaj .innerHtml no ale to zastępuję tylko diva a chciałbym aby ustawiało się div pod divem. Proszę o nakierowanie mnie na rozwiązanie tego problemu. Z góry przepraszam jeżeli nie wyjaśniłem mego kłopotu wystarczająco dobrze. Link do kodu: https://jsfiddle.net/sid2602/umba69jn/

Problem znajduje się w funkcji miedzyczas() i runda().

 

 

Answer 1

A ja bym zamiast

document.getElementById("runda").innerHTML = '<div class="cos">Runda ' + ile + ' ' + miedzy + '</div>';

i

document.getElementById("miedzyy").innerHTML = '<div class="cos">Międzyczas ' + ilemiedzy + ' ' + miedzy + '</div>';

dał

document.getElementById("runda").innerHTML += '<div class="cos">Runda ' + ile + ' ' + miedzy + '</div>';

oraz

document.getElementById("miedzyy").innerHTML += '<div class="cos">Międzyczas ' + ilemiedzy + ' ' + miedzy + '</div>';

wtedy nie będzie Ci nadpisywało tylko dodawało treść do aktualnie obecnej.




 

Comments

Faktycznie za pomocą innerHTML wstawiasz kod html w dany element. Ale czy właściwość ta daje ci referencję do elementów we wstawianym html? Bardzo często będziesz chciał za chwilę zrobić jakąś akcję na wstawianych elementach - np podpiąć im kliknięcie, zmienić im tekst itp. Jeżeli będziesz korzystał z innerHTML, będziesz musiał te elementy po wstawieniu dodatkowo pobrać - np za pomocą querySelector. Nie zawsze jest to wygodniejsze.

źródło

---

Doskonale zdaję sobie z tego sprawę, ale w tym przykładzie autora pytania, najszybciej będzie dodanie '+' i jego program będzie działał, tak jak chce. Oczywistym jest fakt, że można korzystać z metod createElement() oraz apendChild().

---

Dziękuje Wam za odpowiedzi. W moim przypadku najłatwiej było użyć metody przedstawioną przez shotokan jednak postaram się użyć też metody appendChild :D 

Answer 2

appendChild

Comments

dom-tworzenie-i-usuwanie