Javascript/appendChild

解説 指定要素の子要素に追加
sample1
s1Div
sample1code
var s1Div = document.getElementById("s1Div");
var s1Span = document.createElement("span");
s1Span.innerText = "aaa";
s1Div.appendChild(s1Span);
	
smaple2
s2Div
sample2code
function s2Func(){
  var s2Div = document.getElementById("s2Div");
  var s2Ul = document.createElement("ul");
  s2Ul.innerText = "s2Ul";
  s2Ul.style.border = "1px dashed red";
  for(var i=0; i<5; i++){
    var s2Li = document.createElement("li");
    s2Li.innerText = "s2Li[" + i + "]";
    s2Ul.appendChild(s2Li);
  }
  s2Div.appendChild(s2Ul);
}
	
sample3
sample3code
const s3Text = document.getElementById("s3Text");
const s3Btn = document.getElementById("s3Btn");
const s3Div = document.getElementById("s3Div");
s3Btn.addEventListener("click", function(){
  var stVal = s3Text.value;
  nCheck = document.createElement("input");
  nCheck.setAttribute("type", "checkbox");
  var label = document.createElement("label");
  label.appendChild(nCheck);
  nCheck.after(stVal);
  s3Div.appendChild(label);
  label.style.display = "block";
});
	
sample4
sample4code
function s4Func(){
  var sample4 = document.getElementById("sample4");
  var table = document.createElement("table");
  table.id = "s4Table";
  sample4.appendChild(table);
  for(var i=1; i<10; i++){
    var tr = document.createElement("tr");
    table.appendChild(tr);
    for(var j=1; j<10; j++){
  	  var td = document.createElement("td");
      tr.appendChild(td);
      td.textContent += i * j;
    }
  }
}