原生JS实现动态添加新元素、删除元素方法
更新时间：2019年05月05日 08:33:44 作者：给时光以生命
这篇文章主要介绍了原生js实现动态添加新元素、删除元素方法 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
1. 添加新元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态添加新元素</title>
</head>
<body>
<ul class="example">
<li class="child">Coffee</li>
<li class="child">Tea</li>
<li class="child">Coffee</li>
<li class="child">Tea</li>
</ul>
<script>
var child = document.getElementsByClassName("child")[0];
var newChild = document.createElement("li");
var newText = document.createTextNode("wine");
newChild.appendChild(newText);
child.appendChild(newChild)
</script>
</body>
</html>
2.删除已有元素
给时光以生命
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>删除元素</title>
<style>
</style>
</head>
<body>
<ul class="example">
<li class="child">Coffee</li>
<li class="child">Tea</li>
<li class="child">Coffee</li>
<li class="child">Tea</li>
</ul>
<script>
var parent = document.querySelectorAll(".example")[0];
var child = document.querySelectorAll(".child")[2];
document.writeln(child.innerHTML)
parent.removeChild(child); //第二种方法此行替换:child.parentNode.removeChild(child);
</script>
</body>
</html>
总结
以上所述是小编给大家介绍的原生JS实现动态添加新元素、删除元素方法 使用指南,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章:
- JavaScript实现动态添加、移除元素或属性的方法分析
- JS实现为动态添加的元素增加事件功能示例【基于事件委托】
- javaScript动态添加Li元素的实例
- JS动态添加元素及绑定事件造成程序重复执行解决
- JavaScript实现动态添加Form表单元素的方法示例
- 用js动态添加html元素,以及属性的简单实例
- js 动态添加元素(div、li、img等)及设置属性的方法
- JavaScript实现向OL列表内动态添加LI元素的方法
- javascript实现的动态添加表单元素input,button等(appendChild)
- 详解JS获取HTML DOM元素的8种方法
- JavaScript获取DOM元素的11种方法总结
- JS获取动态添加元素的方法详解
相关文章
现将img元素对应的src路径设置为背景图片，而该img所对应的url路径存放在一个自设的属性中2014-03-03
这篇文章主要为大家详细介绍了微信小程序实现tab页面切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
索趣科技的答案...2007-02-02
这篇文章主要介绍了JS实现字符串翻转的方法,结合实例形式分析了javascript字符串使用reverse方法、字符串遍历方法以及针对输入字符串的遍历、逆序输出等方法实现字符串反转相关操作技巧,需要的朋友可以参考下2018-08-08
这篇文章主要为大家详细介绍了微信小程序实现日期格式化和倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
这篇文章主要为大家详细介绍了js代码实现点击按钮出现60秒倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-12-12
微信小程序通过点击事件跨页面传参及data-方法传参（data-）的示例详解
在 vue 中，我们可以直接在点击事件中放入传递的参数进行传参；然而微信小程序中并不适用这样的写法，但是微信小程序可以通过自定义属性从而绑定参数使用，这篇文章主要介绍了微信小程序通过点击事件跨页面传参以及data-方法传参（data-）,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了js简单正则验证汉字英文及下划线的方法,结合完整实例形式分析了javascript针对中英文字母与下划线的正则验证方法,需要的朋友可以参考下2016-11-11
这篇文章主要为大家详细介绍了JavaScript的DOM与BOM的区别与用法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要为大家详细介绍了js实现带翻转动画的图片时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
最新评论