IDEA激活码
1.在div1中添加一个文本节点
1.创建一个文本节点
2.获取div1节点
3.将文本节点添加到div1节点中
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
border: pink 1px solid;
width: 200px;
height: 50px;
margin: 10px;
}
#div1{
background: antiquewhite;
}
</style>
<script type="text/javascript">
//演示创建并添加节点
//在div1中添加一个文本节点
function crtAndAdd(){
/*
1.创建一个文本节点
2.获取div1节点
3.将文本节点添加到div1节点中
*/
//创建一个文本节点
var textNode = document.createTextNode("这是一个新的文本");
//2.获取div1节点
var div1Node = document.getElementById("div1");
//将文本节点添加到div1节点中
div1Node.appendChild(textNode);
}
</script>
</head>
<body>
<input type="button" value="创建并添加节点" onclick="crtAndAdd();">
<div id="div1"></div>
</body>
</html>
2.在div1中添加一个按钮节点
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
border: pink 1px solid;
width: 200px;
height: 50px;
margin: 10px;
}
#div1{
background: antiquewhite;
}
</style>
<script type="text/javascript">
function crtAndAdd2(){
//在div1中添加一个按钮节点
//1.创建一个按钮节点
var node = document.createElement("input");
node.type="button";
node.value="一个新按钮";
//2.获取div1节点
var div1Node2 = document.getElementById("div1");
//3.将按钮节点加到div1节点中
div1Node2.appendChild(node);
}
</script>
</head>
<body>
<input type="button" value="创建并添加按钮节点" onclick="crtAndAdd2();">
<div id="div1"></div>
</body>
</html>
3.删除div2节点
1.通过div2对象获取父节点对象
2.通过父节点对象的removeChild()方法删除子节点
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
border: pink 1px solid;
width: 200px;
height: 50px;
margin: 10px;
}
#div2{
background: aquamarine;
}
</style>
<script type="text/javascript">
function delNode(){
//获取div2节点
var div2Node = document.getElementById("div2");
//使用div节点的removeNode方法删除
//div2Node.removeNode(false);//删除自己
//div2Node.removeNode(true);//删除自己及子节点
//一般使用removeChild()方法，删除子节点
//获取div2的父节点，再用父节点的removeChild()方法删除div2节点
div2Node.parentNode.removeChild(div2Node);
}
</script>
</head>
<body>
<input type="button" value="删除节点" onclick="delNode();">
<div id="div2">好好学习，天天向上</div>
</body>
</html>
4.修改div3节点
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
border: pink 1px solid;
width: 200px;
height: 50px;
margin: 10px;
}
#div1{
background: antiquewhite;
}
#div3{
background: burlywood;
}
</style>
<script type="text/javascript">
//用div3节点替换div1节点
function updateNode() {
//获取div1和div3节点对象
var div1Node = document.getElementById("div1");
var div3Node = document.getElementById("div3");
//使用replaceNode()方法进行替换
//div1Node.replaceNode(div3Node);
//上面方法一般不使用,建议使用replaceChild()方法
//获取div1的父节点对象
var div1NodeParent = div1Node.parentNode;
div1NodeParent.replaceChild(div3Node,div1Node);
}
</script>
</head>
<body>
<input type="button" value="修改节点" onclick="updateNode();">
<div id="div1"></div>
<div id="div3">div区域演示文字</div>
</body>
</html>
4.克隆div3节点
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
border: pink 1px solid;
width: 200px;
height: 50px;
margin: 10px;
}
#div1{
background: antiquewhite;
}
#div3{
background: burlywood;
}
</style>
<script type="text/javascript">
//用div3节点替换div1节点,并且保留div3
function cloneNode1(){
//获取div1和div3节点对象
var div1Node = document.getElementById("div1");
var div3Node = document.getElementById("div3");
var div3Clone = div3Node.cloneNode(true);
//获取div1的父节点对象
var div1NodeParent = div1Node.parentNode;
div1NodeParent.replaceChild(div3Clone,div1Node);
}
</script>
</head>
<body>
<input type="button" value="修改节点" onclick="updateNode();">
<input type="button" value="克隆节点" onclick="cloneNode1();">
<div id="div1"></div>
<div id="div3">div区域演示文字</div>
</body>
</html>
