読者です 読者をやめる 読者になる 読者になる

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本格入門 ~モダンスタイルによる基礎から現場での応用まで

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで