山傘のプログラミング勉強日記

プログラミングに関する日記とどうでもよい雑記からなるブログです。

改訂新版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);