ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

【HTML+CSS+JS】クリックでDOMを操作

Javascript

DOMを追加する

ボタンを押すと🐼が現れ、ボタンが消えます。

Demo

html+css+javascript

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>a</title>
<style>
.box{
  font-size:50px;
  text-align:center;
  line-height:200px;
  background:#ffdddd;
  height:200px;
  width:200px;
  margin:0 auto;
}
#BTN{
  font-size:12px;
  font-weight:bold;
  border-bottom:1px solid #000;
  cursor:pointer;
  text-align:center;
  width:100px;
  margin:10px auto;
}
</style>
</head>
<body>
<div class="box">
<p id="OUTPUT"></p>
</div>
<div id="BTN" onClick="addNode();">
PUSH!
</div>
<script>
function addNode(){
  var CHILD=document.createElement("p");
  CHILD.setAttribute("id","CLD");
  CHILD.innerHTML="🐼";
  var PARNET=document.getElementById("OUTPUT");
  PARNET.appendChild(CHILD);
  var CLD=document.getElementById("CLD");
  CLD.style.fontSize="50px";
  document.getElementById("BTN").style.display="none"
}
</script>
</body>
</html>

消したり出現させたりする。

PANDAを押すと🐼が現れ、REMOVEを押すと消えます。

Demo

html+css+javascript

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>a</title>
<style>
.box{
  font-size:50px;
  text-align:center;
  line-height:200px;
  background:#ffdddd;
  height:200px;
  width:200px;
  margin:0 auto;
}
#BTN{
  font-size:12px;
  font-weight:bold;
  border-bottom:1px solid #000;
  cursor:pointer;
  text-align:center;
  width:100px;
  margin:10px auto;
}
</style>
</head>
<body>
<div class="box">
<span id="PANDA">🐼</span>
</div>
<p id="BTN" onClick="add();">
PANDA
</p>
<p id="BTN" onClick="remove();">
REMOVE
</p>
<script>
function add(){
  document.getElementById("PANDA").style.display="block"
}
function remove(){
  document.getElementById("PANDA").style.display="none"
}
</script>
</body>
</html>