JavaScript 新規にノードを追加する
<script type="text/javascript"> //新規にノードを追加する //フォームに入力した内容を下にページ下部に対応するリンクを追加する //追加ボタンをクリックしたタイミングで実行されるadd関数 function add(f){ //<a>タグを生成 var anchor = document.createElement('a'); //<a>タグのhref属性を設定 anchor.href = f.url.value; //テキストノードを生成し、<a>タグの直下に追加 var name = document.createTextNode(f.name.value); anchor.appendChild(name); //<br>タグを生成 var br = document.createElement('br'); //<div id="list">を取得 var list = document.getElementById('list'); //<div>タグ直下に<a>,<br>タグの順番で追加 list.appendChild(anchor); list.appendChild(br); } </script> <form> <label>サイト名:<br /> <input type="text" name="name" size="30"/></label><br /> <label>URL:<br /> <input type="text" name="url" size="50"/></label><br /> <input type="button" value="追加" onclick="add(this.form)"/> </form> <div id="list"></div>
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
- 作者: 山田祥寛
- 出版社/メーカー: 技術評論社
- 発売日: 2016/09/30
- メディア: 大型本
- この商品を含むブログを見る