2019独角兽企业重金招聘Python工程师标准>>>

本文实例讲述了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);}//欢迎加入全栈开发交流圈一起学习交流：582735936]//面向1-3年前端人员}   //帮助突破技术瓶颈，提升思维能力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)

删除指定的属性。

getAttributeNode(attributename)

以 Attr 对象返回指定属性名的属性值。

removeAttributeNode(attributenode)

删除 Attr 形式指定的属性，同时返回被删除的Attr 形式的属性。

测试用例

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript">function operateAttributes() {var node2 = document.getElementById("node2");//设置font-style和font-size无效，这些属性脱离style单独设置是无效的node2.setAttribute("style", "color:red;");var node3 = document.getElementById("node3");node3.setAttribute("font-size", undefined);var node4 = document.getElementById("node4");//font-style和font-size的remove无效，因为它们没有单独存在node4.removeAttribute("font-size");var node5 = document.getElementById("node5");//无法获取font-style和font-sizevar attributeNode = node5.getAttributeNode("style");var attr = node5.removeAttributeNode(attributeNode);node5.innerHTML = "attr=" + attr + ", attr.name=" + attr.name + ", attr.value=" + attr.value;}</script></head><body onload="operateAttributes()"><p id="node0" style="font-style:italic;font-size:12px;">0 Hello World</p><p id="node1" font-size="12px" font-style="italic">1 Hello World : font-size、font-style等，这些属性脱离style单独设置是无效的</p><p id="node2" style="font-style:italic;font-size:12px;">2 Hello World setAttribute</p><p id="node3" style="font-style:italic;font-size:12px;">3 Hello World setAttribute</p><p id="node4" style="font-style:italic;font-size:12px;">4 Hello World removeAttribute</p><p id="node5" style="font-style:italic;font-size:12px;">5 Hello World getAttributeNode & removeAttributeNode</p></body>
</html>

转载于:https://my.oschina.net/u/3972188/blog/2998033

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

  1. jQuery的创建对象，动态添加、修改、删除属性和方法

    <!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...

  2. vue中 给v-for渲染的元素动态添加移除类名

    vue中 给v-for渲染的元素动态添加移除类名 今天在项目中需要做一个效果,点击对应的li改变当前的color,其他的li取消颜色,在jQuery中这很容易,由于之前已经引入了jQuery,所以直接 ...

  3. 动态添加/删除HTML元素

    动态添加/删除HTML元素 <HTML> <HEAD> <title>动态添加/删除HTML元素</title> <style type=&quo ...

  4. js进阶 9-11 select选项框如何动态添加和删除元素

    js进阶 9-11 select选项框如何动态添加和删除元素 一.总结 一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...

  5. java list遍历添加元素_【转】：java遍历List时动态添加和删除元素

    遍历元素最常见的三种方法: // 1.最普通的一种方式 for(int i = 0;i < size;i++) //2.for each方式 for(BEAN b: BEANLIST) //3. ...

  6. JavaScript实现动态添加页面的表格行数并获取数据

    JavaScript实现动态添加页面的表格行数并获取数据,获取后的数据按照特殊的方式拼接存入数据库,用的时候再把它解析出来就行了. <table cellpadding="0" ...

  7. 原生js动态为table追加html,JS动态添加Table的TR，TD实现方法

    本文实例讲述了JS动态添加Table的TR,TD实现方法.分享给大家供大家参考.具体实现方法如下: var tempRow=0; var maxRows=0; function insertRows( ...

  8. php点击后增加html元素,如何动态生成html元素以及为元素追加属性的方法介绍（附代码）...

    本篇文章给大家分享的是关于如何动态生成html元素以及为元素追加属性的方法介绍(附代码),内容很不错,有需要的朋友可以参考一下,希望可以帮助到大家. 动态生成HTML元素的方法有三种: 第一种:doc ...

  9. JS数组移除元素的八种方法

    JS数组移除元素的八种方法 一.修改arr的length方法 let arr = [1,2,3,4,5,6,7,8,9]; arr.length = 3; console.log('length',a ...

  10. 遍历List移除元素的若干种方法

    众所周知,List在for.while正常遍历过程中,如果remove元素,容易出现ConcurrentModificationException 异常,根本原因的话,之前ArrayList源码分析文 ...

最新文章

  1. Idea项目遇到的错误整理
  2. 服务器事件刷新消息,Windows Server 2003 中的 DNS 事件消息 1616 到 6702
  3. Linux安装宝塔（Bt-Panel），修改用户名或密码，查看面板入口
  4. 使用事件委托降低重复的事件绑定,从而降低dom操作的对性能的消耗[兼容IE版]
  5. udp包大小选折及原因（mtu）
  6. 【转】ASPxGridView 日期范围过滤扩展
  7. gradle 修改java代码_Gradle 插件
  8. p语言是python吗-Python语言
  9. Kettle之Excel输入的简单使用
  10. 专访梁杰：Swift或将取代Objective-C
  11. python抢票软件源代码_自己写的一个抢票加速的Python小程序源码分享-----纯属娱乐...
  12. 基于决策树的交通拥堵成因分析
  13. C++基础编程题（28）猴子吃桃问题
  14. pandas 报错 KeyError: 0
  15. Cesium 贝塞尔曲线、抛物线（笔记）
  16. 名额有限| 和喜马拉雅、网易严选、大搜车...学运营，是超级用户运营！
  17. shell在xcode中涉及到的关键字
  18. 上海临港新片区对于金融业创新发展的扶持政策
  19. 一块手机电池可污染6万升水 环保之路任重道远
  20. KV260开箱初体验

热门文章

  1. JS浏览器兼容性问题
  2. 【VS2010学习笔记】【错误调试】error LNK1123:转换到COFF期间失败；文件无效或者损坏
  3. 智能优化算法：适应度相关优化算法 - 附代码
  4. 从零基础入门Tensorflow2.0 ----三、9.tf.function
  5. Python读取Access数据库基本操作
  6. 数据结构--数组+链表实现哈希表
  7. easyx按钮透明度特效_【素材】100组4K灰尘粒子烟雾特效
  8. Apache Flink 1.9.0 为什么将支持 Python API ？
  9. 面试字节跳动社招，我工资涨了60%，附带面经
  10. 爆竹声中一岁除，春风送暖入屠苏