创建文本节点
var div = document.getElementsByTagName("div")[0];
var textNode = document.createTextNode("<p>好好学习天天向上</p>");
div.appendChild(textNode);
创建元素结点
var div = document.getElementsByTagName("div")[0];
var elementNode = document.createElement("h1");
elementNode.textContent="好好学习天天向上";
div.appendChild(elementNode);
var elementNode1 = document.createElement("h1");
var elementNode2 = document.createElement("h1");
elementNode1.textContent="insertBefore第一个元素结点";
elementNode2.textContent="appendChild第二个元素结点";
div.insertBefore(elementNode1,document.getElementsByTagName("p")[1]);
div.appendChild(elementNode2);
删除节点
var div = document.getElementsByTagName("div")[0];
div.removeChild(document.getElementsByTagName("p")[0]);
改变css样式
function changeColor(color){
document.getElementsByTagName("div")[0].style.backgroundColor=color;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 导入函数库文件funlib -->
<!-- <script src="js/funlib.js"></script> -->
<!-- 导入index.js -->
<style type="text/css">
div{
margin: 0 auto;
height: 500px;
width: 90%;
text-align: center;
background-color: grey;color: white;
}
</style>
</head>
<body>
<center>
<button type="button" onclick="changeColor('black')">护眼模式</button>
<button type="button" onclick="changeColor('grey')">正常模式</button>
<button type="button" onclick="changeColor('blue')">其他模式</button>
</center>
<div>
</div>
</body>
</html>
<script src="js/caozuosx.js"></script>
|