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动态添加新元素、删除元素方法的更多相关文章

  1. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  2. js进阶 9-11 select选项框如何动态添加和删除元素

    js进阶 9-11 select选项框如何动态添加和删除元素 一.总结 一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...

  3. 原生js动态添加style，添加样式

    原生js动态添加style,添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...

  4. js动态添加和删除标签

    html代码 <h1>动态添加和删除标签</h1> <div id="addTagTest"> <table> <thead& ...

  5. angular.element 动态添加和删除元素

    addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容att ...

  6. js数组添加或删除元素

    var arr = new Array(); arr[] = "aaa"; arr[] = "bbb"; arr[] = "ccc"; ar ...

  7. js 数组 添加或删除 元素 splice 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素 filter

    里面可以用 箭头函数 splice         删除 增加 数组 中元素 操作数组 filter 创建新数组  检查指定数组中符合条件的所有元素

  8. js动态添加和删除table的行例子

    <table id="table_report" class="table table-striped table-bordered table-hover&quo ...

  9. JS实现动态添加和删除div

    实现方式一:只在最后一个数据中动态添加或者删除 | 背景需要做一个页面,页面可以输入参数,点击确认按钮可以发请求给某接口.但是接口的某个字段是数组类型,所以在页面上需要实现添加或者删除元素的功能. | ...

随机推荐

  1. 面向对象程序设计（Java） 第2周学习指导及要求

    面向对象程序设计(Java)第2周学习指导及要求 (2019.9.3-2019.9.9)   学习目标 适应老师教学方式,能按照自主学习要求完成本周理论知识学习: 掌握Java Application ...

  2. 【Nginx】四层负载均衡配置

    一.概述 二.配置 2.1 环境准备 2.2 安装及配置 1).下载Nginx 2).下载nginx_tcp_proxy_module 插件 3).编译Nginx 4).修改Nginx.conf配置文 ...

  3. UI自动化测试养成记

    <selenium自动化测试实战>PDF文档下载:https://pan.baidu.com/s/16dt8qPi-C4BOgKe6snAA0A 这几个月我都干了些什么? 当我打算写一本& ...

  4. 每天学会一点点(枚举enum)

    枚举的特点: enum和class.interface的地位一样 使用enum定义的枚举类默认继承了java.lang.Enum,而不是继承Object类.枚举类可以实现一个或多个接口. 枚举类的所有 ...

  5. windows2008r2安装笔记

    安装win7主题 控制面板 - 程序 - 打开或关闭windows功能 - 功能 - 添加功能: 在选择功能里勾选 桌面体验(会添加必要功能),安装就行了. 1.安装好后,个性化时,发现win7主题为 ...

  6. Solve Hibernate Lazy-Init issue with hibernate.enable_lazy_load_no_trans

    I have been suffering from infamous hibernate exception org.hibernate.LazyInitializationException: c ...

  7. git的几个小技巧

    git的几个小技巧 分享git的几个小技巧,后面会根据使用补充.目前包括git撤销本地修改.git回退到前n个版本.git多用户提交冲突解决.git 命令简化.欢迎大家补充^_* 1.git撤销本地修 ...

  8. Knative 实战：三步走！基于 Knative Serverless 技术实现一个短网址服务

    短网址顾名思义就是使用比较短的网址代替很长的网址.维基百科上面的解释是这样的: 短网址又称网址缩短.缩短网址.URL 缩短等,指的是一种互联网上的技术与服务,此服务可以提供一个非常短小的 URL 以代 ...

  9. Phpstudy被暴存在隐藏后门-检查方法

    Phpstudy被暴存在隐藏后门-检查方法 一.事件背景 Phpstudy软件是国内的一款免费的PHP调试环境的程序集成包,通过集成Apache.PHP.MySQL.phpMyAdmin.ZendOp ...

  10. 生成式学习算法（三）之----高斯判别分析模型（Gaussian Discriminant Analysis ，GDA）

    高斯判别分析模型(Gaussian Discriminant Analysis ,GDA) 当我们分类问题的输入特征$x $为连续值随机变量时,可以用高斯判别分析模型(Gaussian Discrim ...