十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
本文实例讲述了JavaScript实现动态添加、移除元素或属性的方法。分享给大家供大家参考,具体如下:
创新互联公司主营望花网站建设的网络公司,主营网站建设方案,重庆APP软件开发,望花h5微信小程序搭建,望花网站营销推广欢迎望花等地区企业咨询
JavaScript 动态添加、移除元素
appendChild(newnode)
向节点的子节点列表的末尾添加新的子节点。
insertBefore(newnode, existingnode)
在已有子节点之前插入新的子节点。
removeChild(node)
删除元素的某个指定的子节点,并以 Node 对象返回被删除的节点,如果节点不存在则返回 null。
innerHTML
属性设置或返回表格行的开始和结束标签之间的 HTML。
测试用例
Middle ChildHello World
JavaScript 动态添加、移除属性
setAttribute(attributename, attributevalue)
添加指定的属性,并为其赋指定的值。将属性设置为undefined等同于删除。
removeAttribute(attributename)
删除指定的属性。
getAttributeNode(attributename)
以 Attr 对象返回指定属性名的属性值。
removeAttributeNode(attributenode)
删除 Attr 形式指定的属性,同时返回被删除的Attr 形式的属性。
测试用例
0 Hello World
1 Hello World : font-size、font-style等,这些属性脱离style单独设置是无效的
2 Hello World setAttribute
3 Hello World setAttribute
4 Hello World removeAttribute
5 Hello World getAttributeNode & removeAttributeNode
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。