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. Go语言标准库之flag

    Go语言内置的flag包实现了命令行参数的解析,flag包使得开发命令行工具更为简单. os.Args 如果你只是简单的想要获取命令行参数,可以像下面的代码示例一样使用os.Args来获取命令行参数. ...

  2. mybatis 生成代码配置 mybatis-generator:generate 的使用详解

    一.环境 mysql+eclipse 二.代码配置 pom.xml <?xml version="1.0" encoding="UTF-8"?> & ...

  3. [币严BIZZAN区块链]数字货币交易所钱包对接之比特币（BTC）

    在币严BIZZAN开发数字货币交易所的过程中,一共有两大难点,一个是高速撮合交易引擎,另一个是钱包对接,这两者是我们团队以前没有接触过的.这个系列的文章主要介绍数字货币交易所钱包对接实现技术.第一个要 ...

  4. Build a pile of Cubes

    version_1: def find_nb(m): # your code ii = 1 total = 0 while total < m: total = sum(each**3 for ...

  5. 6.final和static

    一.final final修饰类表示该类为最终类,不可被继承. final修饰方法表示该方法为最终方法,不可被重写. final修饰属性表示该属性不可变,不可变有两种含义.当其修饰基本类型变量时表明其 ...

  6. FreeSql （三十二）Aop

    FreeSql AOP 已有的功能介绍,未来为会根据用户需求不断增强. 审计 CRUD 马云说过,996是修福报.对于多数程序员来说,加班是好事...起码不是闲人,不会下岗. 当如果因为某个 sql ...

  7. Android Q 正式命名为 Android 10

    根据官方博文,谷歌已经公布了 Android Q 的名称,它并不是想以前一样,以甜食命名,也不是以任何以字母 Q 开头来命名,而是简单称它为 Android 10. 该公司表示,它正在改变其发布版本的 ...

  8. 14个Linux系统安全小妙招，总有一招用的上！

    对于互联网IT从业人员来说,越来越多的工作会逐渐转移到Linux系统之上,这一点,无论是开发.运维.测试都应该是深有体会.曾有技术调查网站W3Techs于2018年11月就发布一个调查报告,报告显示L ...

  9. eclipse搭建springmvc

    https://www.cnblogs.com/qixing/p/qixing.html

  10. ASN1编码中的OID

    0.9.2342.19200300.100.1.25, domainComponent1.2.36.68980861.1.1.10, Signet pilot1.2.36.68980861.1.1.1 ...