<!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>