Javascript/createElement

解説 要素を追加
sample1
sample1Div
sample1code
var sample1Div = document.getElementById("sample1Div");
function sample1Func () {
  var newDiv = document.createElement("div");
  newDiv.id = "newDiv";
  newDiv.innerHTML = "p>newDiv/p>";
  newDiv.style.color = "white";
  newDiv.style.background = "#a98123";
  newDiv.style.padding = "5px";

  sample1Div.append(newDiv);
}
sample2
  • s2Li
sample2code
function s2Func(){
	var s2Prompt = prompt();
	var newLi = document.createElement("li");
	newLi.textContent = s2Prompt;
	var s2Ul = document.getElementById("s2Ul");
	s2Ul.append(newLi);
}
sample3
s3Div
sample3code
function s3Func(){
  var s3Div = document.getElementById("s3Div");
  var s3Img = document.createElement("img");
  s3Img.style.width = "200px";
  s3Img.src = "../../img/code.jpg";
  s3Div.appendChild(s3Img);
}
	
sample4
smaple4code
function s4Func(){
  $('#s4Btn').click(function(){
	var content = "ddd";
	var link = document.createElement( 'a' );
	link.href = window.URL.createObjectURL( new Blob([content]) );
	link.download = "43.txt";
	link.click();
  });
}
	
sample5
smaple5code
function s5Func(){
  if(prompt("password") === "@rise"){	
    let anchor = document.createElement("a");
    anchor.href = "http://arise.work";
    anchor.click();
  } else {
  	alert("bbb");
  }
}
	
sample6
sample6code
const s6Text = document.getElementById("s6Text");
const s6Btn = document.getElementById("s6Btn");
const s6Div = document.getElementById("s6Div");
s6Btn.addEventListener("click", function(){
  var stVal = s6Text.value;
  nCheck = document.createElement("input");
  nCheck.setAttribute("type", "checkbox");
  var label = document.createElement("label");
  label.appendChild(nCheck);
  nCheck.after(stVal);
  s6Div.appendChild(label);
  label.style.display = "block";
});
	
sample7 s7Table
sample7code
function s7Func(){
	let s7Table = document.getElementById("s7Table");
	var tr = document.createElement("tr");
	var td = document.createElement("td");
	var ctr = s7Table.appendChild(tr);
	var ctd = ctr.appendChild(td);
	ctd.textContent = "s7Td";
}
	
sample8
sample8code
function s8Func(){
  var sample8 = document.getElementById("sample8");
  var table = document.createElement("table");
  table.id = "s8Table";
  sample8.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;
    }
  }
}