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. Erlang 不同版本内容

    OTP 22.0 Erlang/OTP 22是一个新的主要版本,具有新的特性和改进,同时也具有不兼容性. 要更深入地了解OTP 22发行版的亮点,您可以阅读我们的博客: http://blog.erl ...

  2. 【Redis】SpringBoot+Redis+Ehcache实现二级缓存

    一.概述 1.1 一些疑惑? 1.2 场景 1.3 一级缓存.两级缓存的产生 1.4 流程分析 二.项目搭建 一.概述 1.1 一些疑惑? Ehcache本地内存 Redis 分布式缓存可以共享 一级 ...

  3. Optional和Stream的map与flatMap

    Optional的map和flatMap Optional存在map和flatMap方法.map源码如下 public<U> Optional<U> map(Function& ...

  4. Git学习-安装与创建本地仓库

    前言 以前公司进行项目的版本管理都是用svn,最近公司推荐用git,把svn给关闭了.没办法,拿来主义.网上一番猛操作,勉强也能用了,给自己做个笔记. git安装 因为我用的是windos系统,在Wi ...

  5. jupyter lab(notebook)相关配置

    安装的是Anaconda3(Python 3.6.4),自带的版本较低,这里升级版本conda update jupyterlab 一.配置jupyter lab(notebook)远程访问 1.1 ...

  6. opencv边缘检测报错

    cnts = cv2.findContours(edged_image.copy(), cv2.RETR_LIST, cv2.CHAIN_APPROX_SIMPLE)cnts = cnts[0] if ...

  7. 前端黑魔法：webworker动态化，无需JS文件创建worker

    前言 前几天,我和一位知乎网友讨论这个问题的时候,觉得这非常有意思,所以写了这篇文章作为记录 本文的思路和项目代码来源于知友 @simon3000,我加以修饰以更符合理解的需求.   本文所用代码已经 ...

  8. MYSQL之概念基础篇

    1数据库概述 1.1 数据管理技术的产生和发展 数据库技术是应数据库管理任务的需要而产生的.20世纪50年代中期以前,计算机主要是用于科学计算.当时的硬件状况是,外存只有纸带.卡片.磁带,没有磁盘等可 ...

  9. [VB.NET Tips]程序的启动和终止

    当执行一个VB.NET应用程序时,CLR会把IL翻译成x86指令,并且寻找一个名为Main的方法. 并从该方法开始执行程序.Main方法也称为程序的"入口"(entry point ...

  10. [C++] 重载运算符与类型转换（2）——函数调用运算符和类型转换运算符

    1.这两个应该是C++中比较高级的用法了. 一.函数调用运算符   1.重载函数调用运算符(),必须是成员函数,一个类可以定义多个不同版本的调用运算符,相互之间应该在参数数量或者类型上有所区别.   ...