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面试-List中的sort详细解读

    最近看了一些排序相关的文章,因此比较好奇,Java中的排序是如何做的.本片文章介绍的是JDK1.8,List中的sort方法. 先来看看List中的sort是怎么写的: @SuppressWarnin ...

  2. [中秋]宇宙第一 IDE Visual Studio 了解一下

    官网 https://visualstudio.microsoft.com/zh-hans/vs/ 文档 https://docs.microsoft.com/zh-cn/visualstudio/d ...

  3. Vue2.x-社交网络程序项目的总结

    最近几天一直在学习Vue的课程,通过这个项目进行进一步的学习Vue方面的知识.掌握如何使用Vue搭建前端,如何请求Node.js写好的后端接口. 一.实现前后端连载 首先在后端的文件中  vue  i ...

  4. Python网络爬虫实战(三)照片定位与B站弹幕

    之前两篇已经说完了如何爬取网页以及如何解析其中的数据,那么今天我们就可以开始第一次实战了. 这篇实战包含两个内容. * 利用爬虫调用Api来解析照片的拍摄位置 * 利用爬虫爬取Bilibili视频中的 ...

  5. myeclipse一直停留在Loading workbench界面上以及停滞启动页不动的处理办法

    找到myeclipse的工作目录,比如我的叫springworkspace(F:\springworkspace\.metadata\.plugins),在.metadata\.plugins中删掉以 ...

  6. spring data jpa介绍

    首先了解JPA是什么? JPA(JavaPersistence API)是Sun官方提出的Java持久化规范.它为Java开发人员提供了一种对象/关联映射工具来管理Java应用中的关系数据.他的出现主 ...

  7. WeakMap 本身释放，而 keyObject 没有释放的情况下，value 会释放吗？

    const keyObject = ['keyObject']; new WeakMap().set(keyObject, ['value']); 问题:现在 ['value'] 会被释放吗? 听说W ...

  8. LOVE POWER html与javaScript

    1.纯HTML与javaScript编写的表白动态图 1.对于世界而言,你是一个人:但是对于某个人,你是他的整个世界. 2.不要为那些不愿在你身上花费时间的人而浪费你的时间. 3.我爱你,不是因为你是 ...

  9. jvm 内存溢出

    堆内存溢出 堆内存中存在大量对象,这些对象都有被引用,当所有对象占用空间达到堆内存的最大值,就会出现内存溢出OutOfMemory:Java heap space 永久代溢出 类的一些信息,如类名.访 ...

  10. PyCharm2019激活

    PyCharm下载地址:https://www.jetbrains.com/pycharm/download/ 永久激活 这里主要介绍永久激活的方式,永久激活后,就可以放心使用了,一劳永逸,5分钟就能 ...