原生JS实现动态添加新元素、删除元素方法


Posted in Javascript onMay 05, 2019

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 相关文章推荐
图片之间的切换
Jun 26 Javascript
input 输入框内的输入事件详细分析
Mar 17 Javascript
动态添加删除表格行的js实现代码
Feb 28 Javascript
jQuery中dequeue()方法用法实例
Dec 29 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
详解vue 组件
Jun 11 Javascript
Angular实现svg和png图片下载实现
May 05 #Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 #jQuery
node Buffer缓存区常见操作示例
May 04 #Javascript
JS实现checkbox互斥(单选)功能示例
May 04 #Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 #jQuery
微信小程序实现判断是分享到群还是个人功能示例
May 03 #Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 #Javascript
You might like
一个php作的文本留言本的例子(六)
2006/10/09 PHP
浅析51个PHP处理字符串的函数
2013/08/02 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
jQuery 位置插件
2008/12/25 Javascript
JavaScript 学习笔记(十五)
2010/01/28 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
jQuery选择器总结之常用元素查找方法
2016/08/04 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
浅谈js中的this问题
2017/08/31 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
python爬取拉勾网职位数据的方法
2018/01/24 Python
pandas分区间,算频率的实例
2019/07/04 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
《老王》教学反思
2014/02/23 职场文书
售后服务经理岗位职责
2014/02/25 职场文书
教师师德考核自我评价
2014/09/13 职场文书
护理医院见习报告
2014/11/03 职场文书
2014年内勤工作总结
2014/11/24 职场文书
领导参观欢迎词
2015/01/26 职场文书
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript