これは結構使いそうなのでめもめも
はじめに
例えばWebサイトとかのボタンとかがクリックされた際に、結果とかを表示する場合に、子要素を追加して、結果を表示するようにします.
また、ボタンが何度もクリックされたら、その度結果が表示される...そんなウェブサイト見たことないので、そうならないようにします.
htmlで記述されている要素に子要素を追加する
headerというidで指定されている<div>があるとする.
const headerContent = document.getElementById('header'); const header = document.createElement('p'); header.innerText = 'xxx'; headerContent.appendChild(header);
上記はheaderのIDを持つ
要素に
<p>を作成しており、header.innerTextによりxxxという内容を追加しています.
子要素の削除
これはbuttonとか、何かしらアクションがあった際に今までに作成した子要素が表示されても困るので、とりあえず削除しておきたい場合.
while(header.firstChild) { header.removeChild(header.firstChild); }
だけです。基本的には関数化しておくと便利でしょう.
いやはや、whileに要素をぶち込んだら要素に内容があるかどうか判定してくれるんですねぇ〜
