createElement i appendChild

Lekcja 12 z 13 w kursie Metody DOM w JavaScript w Coddy.

Funkcja createElement() tworzy nowy element HTML o podanej nazwie znacznika (np. div, p, span). Na przykład:

const newElement = document.createElement("p");

Funkcja appendChild() wstawia określony element potomny jako ostatnie dziecko innego elementu. Dzięki temu możesz tworzyć i modyfikować hierarchię treści na swojej stronie internetowej. Na przykład:

const childElement = document.createElement("p");
childElement.textContent = "This is a new child element.";
parentElement.appendChild(childElement);

W powyższym przykładzie tworzymy nowy element p i dołączamy go do elementu parentElement.

Wyzwanie

Łatwy

Otrzymujesz kod HTML zawierający nieuporządkowaną listę o identyfikatorze myList.

Używając wyłącznie JavaScript, dodaj kolejny element do nieuporządkowanej listy i dodaj do niego tekst "Dog".

Spróbuj swoich sił

<!DOCTYPE html>
<html>
    <body>
        <ul id="animals">
            <li>Cow</li>
            <li>Ant</li>
            <li>Bear</li>
            <li>Camel</li>
        </ul>
        <script src="script.js"></script>
    </body>
</html>

Wszystkie lekcje w sekcji Metody DOM w JavaScript

1Wprowadzenie

Wprowadzenie Model obiektowy dokumentu

2Metody DOM I

getElementById Modyfikowanie stylu elementu getElementsByClassName Iterowanie i manipulowanie getElementsByTagName querySelector

3Metody DOM II

querySelectorAll addEventListener innerHTMLcreateElement i appendChildPrzełączanie classList

Poćwicz samodzielnie: Edytor online Web