js添加标签和删除标签内容
Posted 同心青年
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js添加标签和删除标签内容相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{ height: 200px; background: gold; overflow: scroll; } </style> </head> <body> <div id="div1"> <p>添加标签</p> </div> <input type="button" value="添加" onclick="f1()"> <input type="button" value="删除" onclick="f2()"> </body> <script> /*Null & Undefined 当声明的变量未初始化时，该变量的默认值是 undefined 如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null var person=new Person() var person=null */ function f1() { //添加标签 1.第一步首先获得在那个标签下添加标签 var label_div1 = document.getElementById("div1"); //第二步，创建要添加的标签元素,在文档对象中添加 var ele_lab =document.createElement("p"); //添加内容 ele_lab.innerHTML="ds"; //第三步添加元素倒，div1标签下 label_div1.appendChild(ele_lab); } function f2() { //添加标签 1.第一步首先获得在那个标签下删除标签 var label_div1 = document.getElementById("div1"); //找到最后一个 var remove_md = label_div1.lastElementChild; //从后往前删除 label_div1.removeChild(remove_md); } </script> </html>
-----------------通过js调用class修改字体大小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .big{ font-size: 50px; background-color: firebrick; } .smill{ font-size: 10px; background-color: royalblue; } </style> </head> <body> <p id="pp">vsdvdvdsvdfvd</p> <input type="button" value="dadada" onclick="ff()"> <input type="button" value="XIAOXIAO" onclick="ff1()"> </body> <script> /* 通过js的方式调用的上面的style里的.class内容 * */ function ff() { var c = document.getElementById("pp"); c.classList.remove("smill"); //先删除多余的 c.classList.add("big"); //添加class } function ff1() { var c = document.getElementById("pp"); c.classList.remove("big"); c.classList.add("smill"); } </script> </html>
以上是关于js添加标签和删除标签内容的主要内容，如果未能解决你的问题，请参考以下文章