原生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 相关文章推荐
使用Javascript和DOM Interfaces来处理HTML
Oct 09 Javascript
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
vue路由守卫+登录态管理实例分析
May 21 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
js实现3D旋转相册
Aug 02 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初学者最感迷茫的问题小结
2010/03/27 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
vue.js数据绑定操作详解
2018/04/23 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
python使用cPickle模块序列化实例
2014/09/25 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
python读取并写入mat文件的方法
2019/07/12 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
酒店服务与管理毕业生求职信
2013/11/02 职场文书
领导失职检讨书
2014/02/24 职场文书
会计自荐信范文
2014/03/09 职场文书
家长对学生的评语
2014/04/18 职场文书
高中生操行评语大全
2014/04/25 职场文书
毕业证代领委托书
2014/09/26 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
租车协议书范本2014
2014/11/17 职场文书
迎新年主持词
2015/07/06 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书