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

fkm ~ Super software entertainerへの道 ~

software開発に関することを書いていきます

よしやるかJavascript(3)

要素を作って追加してみよう

Step 4

ボタンを押すとリストにli要素を1つ追加するscriptを書いてみよう

新しい要素を作るにはcreateElement(要素名)
追加するには(親オブジェクト).appendChild(追加する要素). 言語やフレームワークによってこの辺微妙に名前が違うのが曲者ですよね.

また, タグ名で要素を配列で取ってくるのはgetElementsByTagName(タグ名).

<html>
<head>
  <title>Step 4</title>
  <script type="text/javascript">
  <!--
  var count = 1;
  function moke(){
    var li = document.createElement('li');
    li.innerHTML = 'line' + count;
    count += 1;
    var ul = document.getElementsByTagName('ul')[0];
    ul.appendChild(li);
  }
  //-->
  </script>
</head>
<body>
<h1>Step 4</h1>

<Input type="button" onclick="moke()" value="Let's push"/>
<ul>
</ul>
</body>
</html>