DOM模型演示---增删改查中的增_dom添加演示-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36171618/article/details/71601883

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM模型演示---增删改查中的增</title>
</head>
<body>
<div id="div1"> </div>

<input type="button" value="添加1" onclick="add1();"><br>
<input type="button" value="添加2" onclick="add2()"><br/>
<input type="button" value="添加3" onclick="add3();"><br>

<script type="text/javascript">
//1添加一个文本节点
function add1(){
//1创建一个文件节点
var oTextNode = document.createTextNode("文本1");
//获取div节点
var oDiv = document.getElementById("div1");
//把文件节点添加到div节点中去
oDiv.appendChild(oTextNode);
}

//2添加一个按钮节点
function add2(){
//1创建一个文件节点]
var oInputNode = document.createElement("input");
oInputNode.type = "button";
oInputNode.value="一个新的按钮"
//获取div节点
var oDivNode = document.getElementById("div1");
//添加到div中去
oDivNode.appendChild(oInputNode);
}

//3通过每个标签的innerHTML属性也可以添加节点
function add3(){
//1获取div节点
var oDivs =document.getElementById("div1");
//2设置div节点的innerHTML属性 (innerText属性也可以，但只是文本内容)
//oDivs.innerText="abc";//abc
//oDivs.innerText=oDivs.innerText+"abc132";//abcabc123
oDivs.innerHTML='<input type="button" value="一个新按钮" onclick="add2()">';//添加一个新按钮，点击此按钮时调用add2()再次生产一个性按钮
}
</script>
</body>
</html>