JavaScript DOM操作:追加、更新、削除

JavaScript

要素を取得する際のプロパティ

要素を操作するのに必要なプロパティ、メソッドを確認しておきます
innerHTML 指定した要素をタグを含めて取得する
textContent   指定した要素のテキストのみを取得する

<div id="myDiv"><p>取得する要素のテキスト</P></div>

const myEconte = document.getElementById("myDiv");
// myEconte:div#myDiv
// myEconte.innerHTML: <p>取得する要素のテキスト</p>
// myEconte.textContent:"取得する要素のテキスト"

CSSセレクターで取得する場合は以下の様に記述
const myEconte2 = document.querySelector("#myDiv");
// myEconte2:div#myDiv

要素の取得と変更

つぎのようなHTMLを変更します
以下のHTMLの「古いテキスト」の部分を「要素の変更」ボタンが押されたら「新しいテキストです」に変更します

<button onclick="upElement()">要素の変更</button>
<p id="myElement">古いテキスト</p>

<script>
    function upElement() {
        // container変数に要素(ID=”myElement”)を取得
        const container = document.getElementById("myElement");
        // 取得した要素内のテキストを書き換えます
        container.textContent = "新しいテキストです";
    }
</script>

上記で、「古いテキスト」が「新しいテキスト」に書き換わります

要素の作成と追加

以下のdiv要素内の「元のテキスト」の後に「新しい要素」を追加します
ボタンをクリックするとp要素とテキスト「新しいテキストです」が作られ、追加されます
以下の例ではクリックのたびに追加されて行きます

<button onclick="addElement()">要素の追加</button>
<div id="myadElement">元のテキスト</div>

<script>
    function addElement() {
        // addCont変数に要素(ID=”myadElement”)を取得
        const addCont = document.getElementById("myadElement");
        //新しく追加する要素(Element)を作成します
	const addText = document.createElement('p');
        addText.textContent = "新しいテキストです";
	//作った要素を所得した要素内に追加します
        addCont.appendChild(addText); 
    }
    
</script>

要素の削除

上記で追加した要素を1つずつ削除します

<button onclick="delElement()">要素の削除</button>

<script>
	function delElement() {
	  const delEcont = document.getElementById("myElement");
          const  childEcont = delEcont.queryselect("p");
          delCont.removeChild(childCont);
	}

</script>

上記の処理では仮にタグを削除してしまって無くなった場合、ボタンをクリックした時にエラーが起きるます。
そのために、エラーを回避する処理が必要となるかもしれません。
※ここでは割愛します。

上記の全てのサンプルコードでは、動作を確認するために<script>タグの処理をHTML内に記述していますが、推奨されていません。
実際にはJavaScriptは、別ファイルに記述することが必要かと思われます。

コメント