既に設置されているタグの中身を書き換えるのは1行で終わりますが、
1からタグを生み出して、HTMLに出力するのはほんの少しだけめんどくさいです。
具体的に言うと、2行分くらいめんどくさいです。
タグの生成からHTML出力までの流れは、以下のようになります。
- タグを生み出す
- タグに中身を入れる
- タグをHTMLに出力する
それでは、順に見ていきましょう。
今回は一番最後に全てをまとめたサンプルコードを用意しています。
サンプルコードの使い方
コード右上のアイコンをクリックすることでコピーできます。
全てのサンプルコードは、空のhtmlファイルにコピペするだけで結果を確認することができます。
それでは本文へ、レッツゴー！
タグを生み出す
createElementを使うことで、タグを生成することができます。
const 変数名 = document.createElement('生成するタグ');これで変数内にタグが生成&格納されます。
タグに中身を入れる
まだ中身が空っぽのタグなので、
textContentもしくはinnerHTMLを使ってタグに中身を入れていきます。
変数名.textContent = '中身';textContentやinnerHTMLが分からない方はこちら
生成するタグに何かクラスを付与したい場合は、classListを使って付与します。
変数名.classList.add('クラス名');タグをHTMLに出力する
タグの出力方法には、4種類あります。
4種類ありますが頑張って覚える必要もありません。
どんな出力方法があるのかふんわり覚えておけば、あとは必要な時にググればOK
指定した要素内の末尾に出力する
指定した要素の中の一番最後の行に、タグを出力します。
指定した要素の兄弟要素ではなく、子要素になることに注意。
指定した要素.appendChild(生成したタグ);指定した要素内の、さらに指定した子要素の前に出力する
少し日本語が難しいかもしれませんが・・・。
指定した要素.insertBefore(生成したタグ, 指定した子要素);先ほどのappendChildでは強制的に末尾に挿入されていましたが、
これを使うことで好きなところへ挿入することができるようになります。
ただし、2つの要素を取得する必要があります。
要素の上もしくは下に兄弟要素として出力する
こちらの場合、指定した要素の中に入れるのではなく、兄弟要素として上か下に出力することができます。
指定した要素.before(生成したタグ);
指定した要素.after(生成したタグ);文字通りbeforeは指定した要素の前に、afterは指定した要素の後に出力されます。
ついでにタグの削除も
タグを削除する方法は2つあります。
普通に削除する
削除する要素.remove();指定した要素の子要素を削除する
removeで事足りるのでこちらはちょっと使い道が思い浮かばないです・・・。
親要素.removeChild(削除する要素);サンプルコード
今回の内容をまとめたサンプルコードです。
最初はulタグとその中にliタグが2つ用意されています。
<ul>
<li class="existed">最初からあるliタグ</li>
<li class="existed2">最初からあるliタグその２</li>
</ul>
<script>
// ulタグと.existedの取得
const ul = document.querySelector('ul');
const existed = document.querySelector('.existed');
const existed2 = document.querySelector('.existed2')
// ulタグ内の最終行にliタグを出力する
const newElement1 = document.createElement('li');
newElement1.textContent = 'appendChildでulタグの最終行に追加されます！';
ul.appendChild(newElement1);
// ulタグ内の指定した子要素の前にタグを出力する
const newElement2 = document.createElement('li');
newElement2.textContent = 'insertBeforeで一番最初のliタグ（.existed）の前に追加されます！';
ul.insertBefore(newElement2, existed);
// ulタグの上に、兄弟要素としてpタグを出力する
const newElement3 = document.createElement('p');
newElement3.textContent = 'beforeでulタグの前にpタグが追加されます！';
ul.before(newElement3);
// ulタグの下に、兄弟要素としてpタグを出力する
const newElement4 = document.createElement('p');
newElement4.textContent = 'afterでulタグの後にpタグ追加されます！';
ul.after(newElement4);
// .existedを削除する
existed.remove();
ul.removeChild(existed2);
</script>constが分からない方はこちら
querySelector（要素の取得）が分からない方はこちら
