改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで その12
Chapter 6 HTML や XML の文書を操作する - DOM (Document Object Model) -
要素を追加する
JavaFX で学んだように、JavaScript でも要素を追加したりする機能があります。
html
<html> <head> </head> <body> <script type="text/javascript" src="../js/sample10.js"></script> <form> <div> <label for="name">サイト名: </label><br /> <input type="text" id="name" name="name" size="30" /> </div> <div> <label for="url">URL: </label><br /> <input type="text" name="url" id="url" size="50" /> </div> <div> <input id="btn" type="button" value="追加" /> </div> </form> <div id="list"></div> </body> </html>
sample10.js
document.addEventListener('DOMContentLoaded', function() { document.getElementById('btn').addEventListener('click', function() { // テキストボックスに入力された値を取得する var name = document.getElementById('name'); var url = document.getElementById('url'); var anchor = document.createElement('a'); anchor.href = url.value; var text = document.createTextNode(name.value); anchor.appendChild(text); var br = document.createElement('br'); var list = document.getElementById('list'); list.appendChild(anchor).appendChild(br); }, false); }, false);
テキストノードは自動的にエスケープされるので、入力を元にHTML 文字列を生成するときに利用すべきです。
リストを生成
html
<html> <head> </head> <meta charset="utf-8"/> <body> <script type="text/javascript" src="../js/sample11.js"></script> <ul id="list"></ul> </body> </html>
sample11.js
document.addEventListener('DOMContentLoaded', function() { var books = [ { title: 'aaa', price: 1000 }, { title: 'bbb', price: 2000 }, { title: 'ccc', price: 3000 }, ]; var list = document.getElementById('list'); for (var i = 0, len = books.length; i < len; i++) { var b = books[i]; var li = document.createElement('li'); var text = document.createTextNode(b.title + ' : ' + b.price + '円'); li.appendChild(text); list.appendChild(li); } }, false);
本
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
- 作者: 山田祥寛
- 出版社/メーカー: 技術評論社
- 発売日: 2016/09/30
- メディア: 大型本
- この商品を含むブログを見る