HTMLに動的にdivや文字列、input form、textareaなどを追加する方法 – ゆっくり備忘録

動的に追加したいときってありますよね。ボタンをぽちっと押すと、新しいフォームが出てきたりとか。そんなん作りました。 具体例←開いてみてください ソース↓ ↑の簡単な解説: function add() 1行目↓: ↑createElement で、div要素を作成して、div_element に格納しました。 function add() 2行目↓: ↑先ほど作成した、div_element のなかに HTML を書き込んでいます。input や textarea、文字列でもなんでも詰め込み放題です。 function add() 3行目↓: ↑id=piyoの要素を捕まえています。具体例のHTMLのソースを見ると分かると思いますが、 ↑と、なっている箇所があります。ここのdivのidがpiyoなので、この要素を取得しています。parent_objectという変数に格納していますが、先ほど頑張って新しく作ったdiv要素を入れる箱になります。 function add() 4行目↓: ↑先ほど作ったdiv_elementを、parent_object、つまりid=piyoのdivに詰め込んでいます。

情報源: HTMLに動的にdivや文字列、input form、textareaなどを追加する方法 – ゆっくり備忘録