[javascript] Element操作 #2 作成・削除・追加・修正

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

Element操作の2回目は、実際に作ったり、消したり、修正してみたいと思います。
 

前回行なった検索結果のElementを変更してみたり、新規にElementを作成したり、いらなくなったElementを削除する事を覚えると、Element操作の基礎は完了です。
 

レポート画面などにある、データ一覧を表示するtableタグなどの、表示順番の並びをボタン一つで変更したり、formタグで記入してもらったrecordデータをtableに追加したり、削除したりというこの手の作業ができるようになります。
 

もちろん、WEBページにおけるインタラクティブな表示方式なども同じ手順で行う事が可能ですよ。

作成

新たなElementを作り出しす命令ですが、これ一つなので覚えておくと便利に使えます。
 

createElement

 

コメントで解説を書いておいたので、雛形として使えるようにしています。
 

classやidの付与は、setAttributeでも行えるので、記述を統一したい場合は、どちらの方法で行なってもかまいません。
 

内容の書き込みはタグを有効にしたい場合は、innerHTMLで、文字列としてのみの書き込みは、textContentを使って書き込んでください。
 

作成したElementをbodyタグに追加していますが、追加したいElementがある場合は、前回行なった検索で取得したElementにたいしてappendChildしましょう。
 

削除

removeChild

いらなくなったElementを削除するときは、この命令一つで削除できます。
削除したElementに内包するElement全てが削除されてしまいますので、DOM構造を理解して行いましょう。
 

 

先ほど作ったdiv要素を削除してみました。
 

検索したものを削除するだけですが、removeChildの手前のparentNodeは、親Elementを指定しています。
対象のelementを削除するのではなく、removeChildという命令でわかる通り、子要素を削除する命令です。
 

その為、一度親要素も取得する必要があるんですが、対象のelementの親をしていするこのやり方を使えばいいだけなので、わざわざ親要素を個別に選択する必要はありません。
 

追加・修正

上記作成の時に出てきたappendChildの他にもElementを追加する命令がいくつかあるので覚えておくと便利ですよ。
 

appendChild

親要素直下の一番最後に追加されます。

 

insertBefore

指定項目の直前に追加されます。

 

親要素.insertBefore(追加する要素 , 追加する項目の起点となる要素※この項目の手前に追加されます);
 

replaceChild

要素を入れ替えられます。

 

親要素.insertBefore(追加する要素 , 追加する項目の起点となる要素※この項目と入れ替えられます);
 

学習中の人に向けて

いかがでしたか?HTMLのタグ操作をjavascriptで行う方法が分かったと思います。
 

学習過程のエンジニアの人はこの工程でWEBページの仕組みがわかる人も多いようです。
 

実際に柔軟にElement操作ができるようになると、WEBアプリケーションの構築の表示部分は大体行えるようになりますが、この後の学習としてUI/UXという、どのようなHTML構造、表示方式が利用ユーザーにとって使いやすいかという事が必要になります。
 

まあ、この辺は経験値で貯めていく人が多いので実行あるのみなんですけどね。
 

「jQueryを使えば簡単にできる」と言っている人で、こうしたネイティブコードを知らない人も意外と多いようです。
仕事の現場でそういう人がいたら、周囲のエンジニアが非常にかわいそうな目で見ている事が多いので、できればこうした基本コードは覚えておいた方がいいでしょうね。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です