createElement ve appendChild

Coddy'nin JavaScript DOM Metotları kursunda ders 12 / 13.

createElement() fonksiyonu, belirtilen etiket adına (örneğin, div, p, span) sahip yeni bir HTML öğesi oluşturur. Örneğin:

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

appendChild() fonksiyonu, belirtilen bir alt öğeyi başka bir öğenin son alt öğesi olarak ekler. Bu, web sayfanızın içeriğinin hiyerarşisini oluşturmanıza ve değiştirmenize olanak tanır. Örneğin:

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

Yukarıdaki örnekte, yeni bir p öğesi oluşturuyoruz ve bunu parentElement öğesinin içine ekliyoruz.

Görev

Kolay

Size myList kimliğine (ID) sahip sırasız bir liste içeren HTML kodu verilmiştir.

Sadece JavaScript kullanarak, sırasız listeye başka bir liste öğesi ekleyin ve içine "Dog" metnini ekleyin.

Kendin dene

<!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>

JavaScript DOM Metotları bölümündeki tüm dersler

1Giriş

Giriş Document Object Model

2DOM Metotları I

getElementById Eleman Stilini Değiştirme getElementsByClassName Döngü ile Gezinme ve Düzenleme getElementsByTagName querySelector

3DOM Metotları II

querySelectorAll addEventListener innerHTMLcreateElement ve appendChildclassList toggle