文章目录
- 一、增加元素
- 二、删除元素
- 三、更改元素
- 四、元素查找
- 五、练习代码
一、增加元素
先创建一个空标签对象:
var ele=document.createElement("p");
再添加上内容,并且修改样式:
ele.innerHTML="<h2>P标签</h2>";
ele.style.color="red";
ele.style.fontSize="20px";
最后就可以加到你需要的位置了,这里就加到这里就放到一个div1盒子里面:
var fa=document.getElementsByClassName("div1")[0];
fa.appendChild(ele);
二、删除元素
先获取要删元素的所在位置:
var fa=document.getElementsByClassName("div1")[0];
再在所在位置里选中要删的元素:
var son=fa.getElementsByTagName("p")[0];
最后就可以进行删除操作了:
fa.removeChild(son);
三、更改元素
就是一个元素换成另外一个元素,比如这里将p标签换成img标签
先创建img标签:
var imgg=document.createElement("img");
再将img指向一张图片,并设定样式:
imgg.setAttribute("src","jietu.jpg");
imgg.width=160;
imgg.height=130;
之后就分别获取要被替换的元素及其所在盒子:
var ele=document.getElementsByTagName("p")[0];
var fa=document.getElementsByClassName("div3")[0];
最后就可以执行替换操作了:
fa.replaceChild(imgg,ele);
四、元素查找
全局查找标签
- document.getElementById()
- document.getElementsByTagName()
- document.getElementsByClassName()
- document.getElementsByName()
标签内查找标签
- element.getElementsByTagName()
- element.getElementsByClassName()
这个方面的内容在前面的文章有详细分析,请参见文章JavaScript之DOM对象(Node结点属性、导航属性、页面查找)目录中的“页面查找”一栏。
五、练习代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1, .div2, .div3, .div4{
width:200px;
height: 150px;
}
.div1{
background-color: blue;
}
.div2{
background-color: #00b0e8;
}
.div3{
background-color: green;
}
.div4{
background-color: yellow;
}
</style>
</head>
<body>
<div class="div1">
<button onclick="add()">添加p标签</button>
DIV1标签
</div>
<div class="div2">
<button onclick="del()">删除p标签</button>
DIV2标签</div>
<div class="div3">
<button onclick="change()">更改标签</button>
<p>P下的DIV3标签</p>
</div>
<div class="div4">DIV4标签</div>
<script>
function add(){
var ele=document.createElement("p");
ele.innerHTML="<h2>P标签</h2>";
ele.style.color="red";
ele.style.fontSize="20px";
var fa=document.getElementsByClassName("div1")[0];
fa.appendChild(ele);
}
function del(){
var fa=document.getElementsByClassName("div1")[0];
var son=fa.getElementsByTagName("p")[0];
fa.removeChild(son);
}
function change(){
var imgg=document.createElement("img");
imgg.setAttribute("src","jietu.jpg");
var ele=document.getElementsByTagName("p")[0];
var fa=document.getElementsByClassName("div3")[0];
fa.replaceChild(imgg,ele);
}
</script>
</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)