DOM对标签的增删改

最新推荐文章于 2024-09-10 11:20:27 发布

风中浮柳

最新推荐文章于 2024-09-10 11:20:27 发布

阅读量117

点赞数

分类专栏： javascript 文章标签： html

本文链接：https://blog.csdn.net/fefsdf/article/details/84702895

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

对标签增删改的基本操作

创建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 οnclick="createDiv()">创建Div</button>
<button οnclick='removeP()'>删除第一个P标签</button>
<button οnclick='changeId()'>修改Id</button>
<button οnclick='getHTML()'>获取HTML</button>
<button οnclick='changeHTML()'>改变HTML</button>
<button οnclick='setStyle()'>改变样式</button>
<button οnclick='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

收藏

觉得还不错? 一键收藏
0
评论
DOM对标签的增删改

对标签增删改的基本操作创建jsTest.htmlhtml中的内容为 DOM 基础 //增加标签 function createDiv(){ var div = document.createElement('div'); //创建标签 div.id = 'newDiv'; //document.body.ap...
复制链接

扫一扫

专栏目录