0
0

More than 3 years have passed since last update.

JavaScript DOM操作で要素の追加と削除を行う

Last updated at Posted at 2020-12-27

要素を追加する

index.html
    <!DOCTYPE html>
    <html lang="ja">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <h1>JavaScript Practice</h1>
        <dl id="credit">
            <dt>今日の天気</dt>
            <dd class="weather">晴れ</dd>
        </dl>
        <script src="index.js"></script>
    </body>

    </html>

1,どこに要素を追加するのかツリー構造の確認(変更前)

2,appendChild()メソッドを使う

document.appendChild();メソッドを使用する

index.js
// タグを生成
    let element = document.createElement("p");
// テキストを生成
    let text = document.createTextNode("いいお天気ですね");
// bodyタグに要素を追加
    document.querySelector("body").appendChild(element).appendChild(text);

3,どこに要素が追加されたかツリー構造の確認(変更後)

4,要素の削除を行う

removeChild();メソッドを使用する

index.js
// 要素を削除
    let element2 = document.getElementById("credit");
    let parent = element2.parentElement;
    parent.removeChild(element2);

5,要素の確認

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0