トップへ戻る
BLOGS

JavaScript~~したら〜(HTML出力)するの書き方

JavaScript~~したら〜(HTML出力)するの書き方

ユーザーがなにかアクションを起こした時にそのアクションを引き金にして動作するもの

例えばボタンやスクロールやマウスを乗せるなど動作に紐付けて処理をします

今回は、

addEventListener(’アクショントリガー’ , 関数式)

イベントリスナーで送信ボタンが押されたタイミングで関数を実行する。

イベントリスナーは「監視するもの」という意味で

なにかのアクショントリガーに紐付けて関数を実行することができます。

また、その際にfunctionにコールバック関数としてevent引数を追加できるためeventを追加し、

preventDefault()関数でエンターキーのリロードをしないように処理を追加したりなど起きてほしくないイベントを抑制することも出来ます。

addEventListener("submit", function(event) {
  event.preventDefault();
  add();
});

イベントリスナー 使いそうなイベント一覧表

イベント種類内容ドキュメント
clickマウスがクリックされた場合参考
keydown キーボードが押された場合参考
keyup キーボードが離された場合参考
mousedown マウスボタンが押された場合参考
mouseupマウスボタンが離された場合参考
mousemoveマウスカーソルが移動した場合参考
mouseoverマウスカーソルがオブジェクトに重なった場合参考
mouseoutマウスカーソルがオブジェクトから離れた場合参考
onLoadページが読み込まれた場合参考
onUnload他のページに移動する場合参考
focus選択された状態になった場合参考
blurフォーカスを失った場合参考
submitフォームがサブミットされた場合参考
resetフォームがリセットされた場合参考
changeフォームの内容が変更された場合参考
resizeウインドウがリサイズされた場合参考
abortイメージの読み込みが中断された場合参考
error読み込みが失敗した場合参考
loadWebページの読み込みが完了した時に発動(画像などのリソースすべて含む)

などなど、今回はさらにクリックイベントに紐付けてHTMLに書き出すところまでやりたいと思います

HTMLを生成するメソッド

タグを生成する事ができるcreateElement(“li”)

const li = document.createElement("li");

createElementはHTMLのタグを生成することが可能です。

タグを作っただけなのでこのままでは何も起きてくれません

出力する前に作成したタグに「クラス名」や「ID」,「中のテキスト」などを設定していくこともできるので簡単に紹介します

li.id = 'list'; //生成したタグにID:listを追加する
li.className = 'list';//生成したタグにクラス:listを追加する

などなどもちろん生成するタグがinputタグやstyleタグでも後で属性など様々追加できるためその際はまた調べて追記します

innerTextでタグの中にテキストを入れる

li.innerText = todoText;

innerTextはドットで続けると取得。

イコールで中の文字列を書き換えるということが出来ます。

つまりから文字列を入れて中のテキストを空にも出来ます

ちなみに、似たようなメソッドとして

textContent , innerHTMLというメソッドがあるのですが

調べる記事により相違点がまちまちで、比較的新しい2020年の記事を拝見したところ

ほとんど同じ動きをするらしく、

innerText\nの改行を認識したりinnerHTMLはエスケープされたタグをHTMLタグに変換したりなど微妙な違いがあるようですがほとんど同じなので

あまり意識して使用する必要はなさそうです

タグをHTMLとして出力 appendChild()

appendChild(挿入するタグ);

さてここまで来たらもう出力するのみです

上で表記の通り.要素.appendChild(タグ)で指定した要素の最後の子要素として出力することが出来ます

似たような使用法があるメソッドも紹介します

insertBefore(挿入するタグ , 追加する場所)

.親要素.insertBefore()は引数2つで好きな箇所にタグを追加することが可能です。「追加する場所」に指定したタグがある直前に「挿入するタグ」が追加されます。

注意点はこちらもアペンドチャイルドと同じで子要素として挿入する使用で相違点は場所を指定できることです

また引数の追加する場所にNULLを指定するとアペンドチャイルドと同じ動きになり末尾に追加するようにします

これで一通りクリックされたらHMTLに記述するギミックができました

イベントリスナーは非常によく使用するオブジェクトなので理解を深めていきたいですね

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA