js dom 操作节点
html里的节点分为:
1.元素节点
2.属性节点
3.文本节点
4.注释节点
首先我们先创建一个div个一个按钮,用来做下面的操作:
创建并添加节点:
createElement() ----------------创建一个元素节点
appendChild()-------------------将新节点追加到子节点列表的末尾
当我们点击按钮的时候,会添加一个p标签到div中
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 200px;
height: 100px;
border: 1px solid gold;
float: left;
}
</style>
</head>
<body>
<div id="div1"></div>
<input type="button" value="按钮" id="show"/>
<script>
var father=document.getElementById('div1');
document.getElementById('show').onclick=function(){
var newchild=document.createElement('p');
newchild.innerText='这是一个通过js添加的p节点';
father.appendChild(newchild)
}
</script>
</body>
</html>
移除节点
removeChild()--------移除一个子节点
当我们点击按钮的时候,会移除div里面的p标签
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 200px;
height: 100px;
border: 1px solid gold;
float: left;
}
</style>
</head>
<body>
<div id="div1">
<p id="p">这是一个预先写好的p标签</p>
</div>
<input type="button" value="按钮" id="show"/>
<script>
var father=document.getElementById('div1');
document.getElementById('show').onclick=function(){
var p=document.getElementById('p');
father.removeChild(p)
}
</script>
</body>
</html>
替换节点
replaceChild()--------替换一个子节点
当点击按钮的时候,创建一个新的节点(例如一张图片),把原本div里面的p标签替换成新创建的节点
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 200px;
height: 100px;
border: 1px solid gold;
float: left;
}
</style>
</head>
<body>
<div id="div1">
<p id="p">这是一个预先写好的p标签</p>
</div>
<input type="button" value="按钮" id="show"/>
<script>
var father=document.getElementById('div1');
document.getElementById('show').onclick=function(){
var p=document.getElementById('p');
var img=document.createElement('img');
img.src="a1.jpg";
father.replaceChild(img,p)
}
</script>
</body>
</html>
在已有的子节点前添加一个新的子节点
insertBefore(新节点,已有节点)
当点击按钮的时候,创建一个新的节点(例如一张图片),在原本div里面的p标签前添加上这个新节点。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 200px;
height: 100px;
border: 1px solid gold;
float: left;
}
</style>
</head>
<body>
<div id="div1">
<p id="p">这是一个预先写好的p标签</p>
</div>
<input type="button" value="按钮" id="show"/>
<script>
var father=document.getElementById('div1');
document.getElementById('show').onclick=function(){
var p=document.getElementById('p');
var img=document.createElement('img');
img.src="a1.jpg";
father.insertBefore(img,p)
}
</script>
</body>
</html>
复制节点
元素节点.cloneNode(Boolean)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 200px;
height: 100px;
border: 1px solid gold;
float: left;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<p>这是div2里的p标签</p>
</div>
</div>
<input type="button" value="按钮" id="show"/>
<script>
document.getElementById('show').onclick=function(){
var father=document.getElementById('div1');
var div2=document.getElementById('div2');
var new2=div2.cloneNode(false);//true是复制所有东西 包括div2里面的东西 false只复制这个div 里面的内容不复制
father.appendChild(new2)
}
</script>
</body>
</html>