原生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 相关文章推荐
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
对vue.js中this.$emit的深入理解
Feb 23 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
JS+CSS实现3D切割轮播图
Mar 21 Javascript
VSCode launch.json配置详细教程
Jun 18 Javascript
element tree树形组件回显数据问题解决
Aug 14 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 保留小数点
2009/04/21 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
python2 与 python3 实现共存的方法
2018/07/12 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
Python操作qml对象过程详解
2019/09/26 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
警察群众路线整改措施
2014/09/26 职场文书
预备党员半年考察意见
2015/06/01 职场文书
Python数组变形的几种实现方法
2022/05/30 Python