原生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 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
百度地图自定义控件分享
Mar 04 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 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/10/22 PHP
学习使用curl采集curl使用方法
2012/01/11 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
ThinkPHP实现静态缓存和动态缓存示例代码
2017/05/02 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
js的对象与函数详解
2019/01/21 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
python破解bilibili滑动验证码登录功能
2019/09/11 Python
如何基于python实现脚本加密
2019/12/28 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
2014小学教师年度考核工作总结
2014/12/03 职场文书
地道战观后感300字
2015/06/04 职场文书
五年级作文之想象作文
2019/10/30 职场文书
Python3的进程和线程你了解吗
2022/03/16 Python