JavaScript实现动态添加、移除元素或属性的方法分析

font

font-size

168 浏览量更新于2023-05-04 收藏 76KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

JavaScript实现动态添加、移除元素或属性的方法分析实现动态添加、移除元素或属性的方法分析

本文实例讲述了JavaScript实现动态添加、移除元素或属性的方法。分享给大家供大家参考，具体如下：

JavaScript 动态添加、移除元素动态添加、移除元素

appendChild(newnode)

向节点的子节点列表的末尾添加新的子节点。

insertBefore(newnode, existingnode)

在已有子节点之前插入新的子节点。

removeChild(node)

删除元素的某个指定的子节点，并以 Node 对象返回被删除的节点，如果节点不存在则返回 null。

innerHTML

属性设置或返回表格行的开始和结束标签之间的 HTML。

测试用例测试用例

<html>

<head>

.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>

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>

<div id="middle-child">Middle Child</div>

</div>

<div id="container3" class="style3"><p id="myNode">Hello World</p></div>

<button onclick="operateElements()">Operate Elements</button>

</body>

</html>

JavaScript 动态添加、移除属性动态添加、移除属性

setAttribute(attributename, attributevalue)

添加指定的属性，并为其赋指定的值。将属性设置为undefined等同于删除。

removeAttribute(attributename)

删除指定的属性。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38651540

粉丝: 5
资源: 915

会员权益专享

JavaScript实现动态添加、移除元素或属性的方法分析

动态加载Js代码到Head标签中的脚本

JS实现动态添加外部js、css到head标签的方法

javascript动态添加、修改、删除对象的属性与方法详解

JavaScript实现动态添加Form表单元素的方法示例

JavaScript实现tab栏切换效果

JS简单添加元素新节点的方法示例

使用JavaScript实现交互式网页元素

使用JavaScript实现动态网页效果

网页设计给元素一个class属性并使点击这个元素添加这个class属性点击其他元素时移除这个class属性

网页设计给元素一个class属性并使点击这个元素添加这个class属性点击其他元素时移除这个class属性,如果这个元素已经有这个属性点击移除

javascript追加移除样式

用JavaScript实现模拟数组数据

js 点击给元素添加class属性

javascript dom 操作 局部刷新

classname怎么实现动态样式

动态添加得不可编辑元素如何选中删除

js 移除 style

我需要一段能用javascript实现的楼层效果

JavaScript实现卷轴展开效果

微信小程序开发 vue 动态添加多个不同的class类名

会员权益专享

最新资源

javascript dom 操作局部刷新