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. 除了FastJson,你还有选择: Gson简易指南

    前言 这个周末被几个技术博主的同一篇公众号文章 fastjson又被发现漏洞,这次危害可导致服务瘫痪! 刷屏,离之前漏洞事件没多久,fastjson 又出现严重 Bug.目前项目中不少使用了 fast ...

  2. 《Fluent Python》---一个关于memoryview例子的理解过程

    近日,在阅读<Fluent Python>的第2.9.2节时,有一个关于内存视图的例子,当时看的一知半解,后来查了一些资料,现在总结一下,以备后续查询: 示例复述 添加了一些额外的代码,便 ...

  3. 使用dubbo引用和发布服务时出现的异常：HTTP状态500 - 请求处理失败; 嵌套异常是com.alibaba.dubbo.rpc.RpcException：无法在服务cn.e3mall.service.ItemService中调用方法getTbItemById。使用dubbo版本2.5.3在消费者...

    异常情况如下: 从异常看,主要是因为TbItem没有序列化: 分析问题: 表现层调用服务端时返回了一个TbItem对象即Java对象,此时这个对象远程调用拿过来必须进行序列化,要进行网络传输必须先要把 ...

  4. Java中String为什么是不可变的

    1.在Java中,String类是不可变类,一个不可变类是一个简单的类,并且这个的实例也不能被修改, 这个类的实例创建的时候初始化所有的信息,并且这些信息不能够被修改 2.字符串常量池 字符串常量池是 ...

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

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

  6. eclipse wifi 连接手机

    参考:http://blog.csdn.net/onlyonecoder/article/details/9121397 首先打开手机的wifi设置,使其连接到网络.然后,需要在手机上对adb连接端口 ...

  7. tomcat启动抛出异常

    2018-5-26 15:55:47 org.apache.catalina.startup.VersionLoggerListener log信息: Server version: Apache T ...

  8. SpringAop实现公共字段填充

    一.说明 项目中经常会有一些放在缓存中的公共字段需要进行填充,我们知道mybatis-plus很方便地可以实现公共字段填充.在这里我定义了一个字段填充的注解,当我们需要进行数据填充的时候只要在方法上打 ...

  9. Day 1 linux系统的发展史与虚拟机的安装过程

    自由软件之父 Richard M. Stallman 1984 发起了GNU组织 copyleft opensourc free GPL copyleft 代表无版权.copyright 代表有版权. ...

  10. 24 (OC)* 加密

    一 .MD5加密 MD5加密是最常用的加密方法之一,是从一段字符串中通过相应特征生成一段32位的数字字母混合码. MD5主要特点是 不可逆,相同数据的MD5值肯定一样,不同数据的MD5值不一样(也不是 ...