没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
试读
2页
本文实例讲述了JavaScript实现动态添加、移除元素或属性的方法。分享给大家供大家参考,具体如下: JavaScript 动态添加、移除元素 appendChild(newnode) 向节点的子节点列表的末尾添加新的子节点。 insertBefore(newnode, existingnode) 在已有子节点之前插入新的子节点。 removeChild(node) 删除元素的某个指定的子节点,并以 Node 对象返回被删除的节点,如果节点不存在则返回 null。 innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。 测试用例 <html> <head>
资源推荐
资源详情
资源评论
JavaScript实现动态添加、移除元素或属性的方法分析实现动态添加、移除元素或属性的方法分析
本文实例讲述了JavaScript实现动态添加、移除元素或属性的方法。分享给大家供大家参考,具体如下:
JavaScript 动态添加、移除元素动态添加、移除元素
appendChild(newnode)
向节点的子节点列表的末尾添加新的子节点。
insertBefore(newnode, existingnode)
在已有子节点之前插入新的子节点。
removeChild(node)
删除元素的某个指定的子节点,并以 Node 对象返回被删除的节点,如果节点不存在则返回 null。
innerHTML
属性设置或返回表格行的开始和结束标签之间的 HTML。
测试用例测试用例
<html>
<head>
<style type="text/css">
.style1 { background-color:yellow; width:200px;height:100px;float:left;}
.style2 { background-color:#aa0; width:200px;height:100px;float:left;}
.style3 { background-color:rgb(0,200,200); width:200px;height:100px;float:left;}
.item-style {background-color:pink;}
</style>
<script type="text/javascript">
function addElement1() {
var container = document.getElementById("container1");
var elem1 = document.createElement("div");
elem1.setAttribute("class", "item-style");
var textnode1 = document.createTextNode("appendChild");
elem1.appendChild(textnode1);
container.appendChild(elem1);
var middleChild = document.getElementById("middle-child");
var elem2 = document.createElement("div");
elem2.setAttribute("class", "item-style");
var textnode2 = document.createTextNode("insertBefore");
elem2.appendChild(textnode2);
container.insertBefore(elem2, middleChild);
}
function addElement2() {
var container = document.getElementById("container2");
container.innerHTML = "<div>Hello World \"2\"</div>";
}
function removeNode() {
var container = document.getElementById("container3");
var myNode = document.getElementById("myNode");
container.removeChild(myNode);
}
function operateElements() {
addElement1();
addElement2();
removeNode();
}
</script>
</head>
<body onload="operateElements()">
<div id="container1" class="style1">
<div id="middle-child">Middle Child</div>
</div>
<div id="container2" class="style2"></div>
<div id="container3" class="style3"><p id="myNode">Hello World</p></div>
<div style="clear:both;"/>
<button onclick="operateElements()">Operate Elements</button>
</body>
</html>
JavaScript 动态添加、移除属性动态添加、移除属性
setAttribute(attributename, attributevalue)
添加指定的属性,并为其赋指定的值。将属性设置为undefined等同于删除。
removeAttribute(attributename)
删除指定的属性。
资源评论
weixin_38651540
- 粉丝: 5
- 资源: 916
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功