DOM对标签的增删改

来源：互联网发布：linux怎么加入域编辑：程序博客网时间：2024/06/06 06:10

对标签增删改的基本操作

创建jsTest.html
html中的内容为
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>DOM 基础</title>
<link href='jsTest.css' type='text/css' rel="stylesheet"/>
<script type="text/javascript">
//增加标签
     function createDiv(){
var div = document.createElement('div'); //创建标签
div.id = 'newDiv';
//document.body.appendChild(div);   //把div放到myDiv的后面
document.body.insertBefore(div,document.getElementById('myDiv')); //把div放在myDiv的前面
}
//移除标签
function removeP(){
var p=document.getElementsByTagName("p")[0];
p.parentNode.removeChild(p);
}
//修改标签属性和内容
function changeId(){
var div=document.getElementById('myDiv');
div.id='testNewId';
}
//获取某标签中的内容
function getHTML(){
var div = document.getElementById('myDiv');
alert(div.innerHTML);
}
//嵌入新div
function changeHTML(){
var div=document.getElementById('myDiv');
div.innerHTML="<div>嵌入的新div</div>"
}
//第一种改变样式方法
function setStyle(){
var div=document.getElementById('myDiv');
div.style.background='#ffff00';
div.style.width=300+'px';
div.style.height=50+'px';
}
     //第二种改变样式方法
function useCSS(){
var div=document.getElementById('myDiv');
div.className='myDiv';
}
</script>
</head>

<body>
<div id = "myDiv">
<p>p标签1</p>
</div>
<p>p标签2</p>
<button onclick="createDiv()">创建Div</button>
<button onclick='removeP()'>删除第一个P标签</button>
<button onclick='changeId()'>修改Id</button>
<button onclick='getHTML()'>获取HTML</button>
<button onclick='changeHTML()'>改变HTML</button>
<button onclick='setStyle()'>改变样式</button>
<button onclick='useCSS()'>改变样式2</button>
</body>
</html>

创建jsTest.css文件，把他与jsTest.js放在同一个文件夹中
css中的内容为
.myDiv{
background-color:#ffff00;
width:300px;
height:50px;
}

更多方法可查看http://www.w3school.com.cn/网站

0 0