JSによって動的に要素を作成し追加できる。さっそくやってみよう。
[実行例]
ボタンがある。

押すと要素が追加される。

押すたびに要素が追加されていく。

[作例]
web11フォルダを作成しその中にlesson1.htmlを以下のように作成する。

●lesson1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>jsレッスン</title>
</head>
<body>
<button id="btn">追加</button>
<ol id="list"></ol>
<script>
var ol=document.getElementById('list');
var btn=document.getElementById('btn');
var count=0;
btn.addEventListener('click',function(){
  var li=document.createElement('li');
  li.textContent='Item'+(++count);
  ol.appendChild(li);
});
 </script>
</body>
</html>

[解説]
document.createElement(‘li’)でli要素を作成し、親要素がappendChildでその要素を追加している。

DOMの操作が以下のサイトによくまとまっている。参考にすること。

ライブラリを使わない素のJavaScriptでDOM操作

[やってみよう]

以下のlesson2.htmlを利用し、九九の表を作成せよ。(idがtableのテーブルタグに要素を追加して作成すること)

●lesson2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>jsレッスン</title>
</head>
<body>
<table id="table" border="1"></table>
<script>
window.onload=function(){
  ~ここに記述する~
};
</script>
</body>
</html>

[解答例]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>jsレッスン</title>
</head>
<body>
<table id="table" border="1"></table>
<script>
window.onload=function(){
  var table=document.getElementById('table');
  for(var i=1;i<=9;i++){
    var tr=document.createElement('tr');
    for(var j=1;j<=9;j++){
      var td=document.createElement('td');
      td.textContent=i+'*'+j+'='+(i*j);
      tr.appendChild(td);
    }
    table.appendChild(tr);
  }
};
</script>
</body>
</html>



●演習問題
以下のような九九練習アプリを作成してみよう。
実行すると九九の表が表示される。

項目をクリックするとダイアログで問題と入力欄が表示される

正しい答えを入力すると緑で着色される。(間違えはピンク)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>jsレッスン</title>
</head>
<body>
<table id="table" border="1"></table>
<script>
window.onload=function(){
  var eleTable=document.getElementById('table');
  for(var i=1;i<=9;i++){
	  var tr=document.createElement("tr");
	  for(var j=1;j<=9;j++){
		  var td=document.createElement("td");
		  td.textContent=i+"*"+j+"=";
		  td.x=i;
		  td.y=j;
		  td.ans=i*j;
		  td.addEventListener("mouseenter",function(){
			  this.style.textDecoration="underline";
		  });
		  td.addEventListener("mouseleave",function(){
			  this.style.textDecoration="none";
		  });
		  td.addEventListener("click",function(){
			  var userAns=window.prompt(this.x+"*"+this.y+"=");
			  if(this.ans==userAns){
				  this.style.backgroundColor="lightgreen";
			  }else{
				this.style.backgroundColor="pink";
			  }
		  });
		  tr.appendChild(td);
	  }
	  eleTable.appendChild(tr);
  }
};
</script>
</body>
</html>