js添加、删除DOM元素

通过demo来熟悉js添加、删除DOM元素，下面是html代码以及在浏览器中的效果：

HTML

<ul class="list"><li class="item">1</li><li class="item">2</li><li class="item">3</li>
</ul>

效果：

添加DOM元素：

1、appendChild()方法

该方法添加的元素位于父元素的末尾，使用方法：

parentNode.appenChild(NewNode) // parentNode是需要添加元素的容器，NewNode是新添加的元素

创建一个li元素并添加到ul的末尾：

const ulNode = document.querySelectorAll('.list')[0],liNode = document.createElement('li');
liNode.className = 'item';
liNode.innerHTML = 4;
ulNode.appendChild(liNode);

效果：

2、insertBefore()方法

该方法可以将元素添加到指定位置，使用方法：

// parentNode是需要添加元素的容器，NewNode是新添加的元素, beforeNode是添加在哪个元素之前
parentNode.insertBefore(newNode, beforeNode)

创建一个li元素并添加在第二个li元素之前：

const ulNode = document.querySelectorAll('.list')[0],liNodes = document.querySelectorAll('.item'),liNode = document.createElement('li');
liNode.className = 'item';
liNode.innerHTML = 4;
ulNode.insertBefore(liNode, liNodes[1]);

效果：

删除DOM元素：

removeChid()方法

该方法用于删除指定元素，使用方法：

parentNode.removeChild(removeNode) // parentNode是需要删除元素的容器，removeNode是要删除的元素

删除第二个li元素：

const ulNode = document.querySelectorAll('.list')[0],liNodes = document.querySelectorAll('.item');
ulNode.removeChild(liNodes[1]);

效果：

js添加、删除DOM元素相关推荐

js添加删除HTML元素
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
jq添加或删除html元素,jQuery添加删除DOM元素方法详解
本文实例分析了jQuery添加删除DOM元素的方法.分享给大家供大家参考,具体如下: 介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面. 1.DOM ...
js:如何删除dom元素
这几天,在做移动端的一个项目,然后遇到遇到一个问题,就是动态添加的dom元素,如何删除,平时的遇到的都是删除dom元素的属性,这个还真是第一次遇到,百度了网上的资源,也搜到了,代码如下 var par ...
vue动态添加/删除dom元素
vue的思想是通过数据操作dom,所以我们根据data中的数据进行对dom的遍历,从而操作数据就可以对vue进行一个动态的添加或者删除啦! <template><div>< ...
js添加删除数组元素
添加元素 <script>// 1.push()在数组元素的末尾添加一个或多个数组元素 push推var arr=[1,2,3];// arr.push(4,'lxl')会返回新数组的长 ...
vue 获取id元素,vue.js怎么获取dom元素？
vue.js怎么获取dom元素?下面本篇文章给大家介绍一下vue.js获取dom元素的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 使用Vue.js获取dom元素标签中添加 ...
html动态资源加载进度,JavaScript_快速解决js动态改变dom元素属性后页面及时渲染的问题，今天实现一个进度条加载过程 - phpStudy...
快速解决js动态改变dom元素属性后页面及时渲染的问题今天实现一个进度条加载过程,dom结构其实就是两个div 控制里层div的宽width属性,就能实现进度条往前走的效果. 我的进度条是显示下载文 ...
动态添加/删除HTML元素
动态添加/删除HTML元素 <HTML> <HEAD> <title>动态添加/删除HTML元素</title> <style type=&quo ...
js list删除指定元素_删除js数组中的指定元素，有这两步就够了
js数组是js部分非常重要的知识,有时我们有这么个需求js数组删除指定元素,先定义一个函数来获取删除指定元素索引值,然后用js数组删除的方法,来删除指定元素即可,就两步不难,很简单. 1.JS的数组对 ...

js添加、删除DOM元素

js添加、删除DOM元素

js添加、删除DOM元素相关推荐

最新文章

热门文章