javascript HTML要素の作成、Class、Id、要素の追加、要素の削除、子要素の削除 勉強用

HTML要素の作成、Class、Id、要素の追加、要素の削除、子要素の削除

タグを作る

document.createElement("タグ名");

const div = document.createElement("div");
const p = document.createElement("p");
const a = document.createElement("a");

作ったタグにクラスやIDを紐づける

div.id = 'id';     //idを付ける
p.className = 'p'; //classを付ける

タグに要素の追加

const text = '要素の追加';
div.appendChild(text);
console.log(div);

指定したHTML要素を削除する

removeメソッドを使って、指定したHTML要素自身を削除。

const list_element = document.querySelector(".list");
list_element.remove(); //listで取ってきた要素が全て削除される

削除された要素
<!--<ul class="list">-->
<!--<li>テキスト</li>-->
<!--<li>テキスト2</li>-->
<!--<li>テキスト2</li>-->
<!--<li>テキスト3</li>-->
<!--</ul>-->

指定したHTML要素の子要素を削除する

const list_element = document.querySelector(".list");

const remove_element = list_element.removeChild(list_element.firstElementChild);
//list_element要素にある初めの子要素が削除される

削除された要素
<ul class="list">
<!--<li>テキスト1</li>-->
<li>テキスト2</li>
<li>テキスト3</li>
</ul>

指定したHTML要素の子孫要素を削除する

指定したHTML要素の直下にある子要素ではなく、さらに下に位置する子孫要素をピンポイントで削除する場合はquerySelectorメソッドを使う。

const list_element = document.querySelector(".list");
list_element.querySelector("li strong").remove();

削除された要素
<ul class="list">
    <li>テキスト</li> <!--<strong>1</strong>-->
    <li>テキスト<strong>2</strong></li>
    <li>テキスト<strong>3</strong></li>
    <li>テキスト<strong>4</strong></li>
    <li>テキスト<strong>5</strong></li>
  </ul>

指定したHTML要素の親要素を削除する

指定したHTML要素の親要素を削除する場合は、parentNodeプロパティとremoveメソッドを組み合わせて行う。

const list_element = document.querySelector(".list");
list_element.parentNode.remove();

削除された要素
<!--<ul class="list">-->
<!--<li>テキスト</li>-->
<!--<li>テキスト2</li>-->
<!--<li>テキスト3</li>-->
<!--</ul>-->

指定したHTML要素の隣り合う要素を削除する

指定したHTML要素の隣り合う要素をする場合は、previousElementSiblingプロパティかnextElementSiblingプロパティと、removeメソッドを組み合わせて行う。

previousElementSiblingプロパティは隣り合う1つ前のHTML要素を取得する。
nextElementSiblingプロパティは隣り合う次のHTML要素を取得する。

const li_element = document.querySelector("li:nth-child(3)"); //<li>テキスト3</li>の要素を取得

li_element.previousElementSibling.remove();//隣り合う1つ前のHTML要素を取得して削除
li_element.nextElementSibling.remove();//隣り合う次のHTML要素を取得して削除

削除された要素
<ul class="list">
<li>テキスト1</li>
<!--<li>テキスト2</li>-->
<li>テキスト3</li>
<!--<li>テキスト4</li>-->
</ul>