【HTML+CSS+JS】クリックでDOMを操作
DOMを追加する
ボタンを押すと🐼が現れ、ボタンが消えます。
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を押すと消えます。
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>