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


Posted in Javascript onJanuary 03, 2019

本文实例讲述了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实现动态添加、移除元素或属性的方法分析

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-size
        var 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>

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

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
jQuery的position()方法详解
Jul 19 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
Three.js学习之网格
Aug 10 Javascript
JS如何生成一个不重复的ID的函数
Dec 25 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
js canvas实现红包照片效果
Aug 21 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 #Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 #Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 #Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 #Javascript
发布一款npm包帮助理解npm的使用
Jan 03 #Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 #Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 #Javascript
You might like
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
常用PHP框架功能对照表
2014/10/23 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
layui table 参数设置方法
2018/08/14 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
Python设计模式之工厂模式简单示例
2018/01/09 Python
对python中dict和json的区别详解
2018/12/18 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
对python周期性定时器的示例详解
2019/02/19 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
Python中字符串与编码示例代码
2019/05/20 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
python读取Excel表格文件的方法
2019/09/02 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
中学生班主任评语
2014/01/30 职场文书
一年级学生评语
2014/04/23 职场文书
领导干部对照检查材料
2014/08/24 职场文书
2014年领班工作总结
2014/11/25 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
python中数组和列表的简单实例
2022/03/25 Python
Python如何让字典保持有序排列
2022/04/29 Python