createElement と appendChild

Coddyの「JavaScript DOM メソッド」コースのレッスン 12/13。

関数 createElement() は、指定されたタグ名（例：div、p、span）を持つ新しいHTML要素を作成します。例えば：

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

関数 appendChild() は、指定された子要素を別の要素の最後の子として挿入します。これにより、ウェブページの内容の階層を構築および変更できます。例えば：

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

上記の例では、新しい要素 p を作成し、それを parentElement 要素の中に追加しています。

チャレンジ

簡単

IDがmyListである順序なしリストを含むHTMLコードが与えられています。

JavaScriptのみを使用して、その順序なしリストに別のリスト項目を追加し、そこにテキスト"Dog"を追加してください。

自分で試してみよう

<!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 メソッドのすべてのレッスン

1イントロダクション

イントロダクション Document Object Model

2DOMメソッド I

getElementById 要素のスタイルを変更する getElementsByClassName ループ処理と操作 getElementsByTagName querySelector

3DOMメソッド II

querySelectorAll addEventListener innerHTMLcreateElement と appendChildclassList toggle