DOM学习篇 二

最新推荐文章于 2022-10-06 15:11:43 发布
最新推荐文章于 2022-10-06 15:11:43 发布
阅读量224 收藏
点赞数 1
分类专栏： 笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46440394/article/details/119053280
版权
本文介绍了DOM操作中的四个基本操作：如何使用JavaScript进行元素的插入（appendChild和insertBefore）、删除（removeChild）、复制（cloneNode）以及替换（replaceChild）。详细阐述了每个方法的用法及其在不同情况下的效果。
摘要由CSDN通过智能技术生成

插入元素

一、A.appendChild(B);
//appendChild()把一个新元素插入到父元素的内部子元素的 末尾；A表示父元素，B表示动态创建好的新元素
appendChild如果添加是页面已经存在的节点。相应于是移动

二、A.insertBefore(B,ref);
//A表示父元素，B表示新子元素。ref表示指定子元素，在这个元素之前插入新子元素
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

删除元素

A.removeChild(B);
//A表示父元素，B表示父元素内部的某个子元素

在这里插入图片描述

最低0.47元/天 解锁文章
月亮不营业
关注
专栏目录
JavaScript——三分钟带你了解appendChild和inserBefore的区别
NanChen的博客
10-12 1082
众所周知，这两种方法都是添加节点的操作，那么有什么区别呢？ appendChild方法：可以向节点的子节点列表的末尾添加新的子节点。 insertBefore方法：可在已有的字节点前中插入一个新的子节点。 appendChild的语法：node.appendChild(节点对象) 什么意思呢？appendchild方法是在子类的列表的末尾添加节点而insertBefore是在自己的前面添加新的节点 比如这里举个例子： <!DOCTYPE html> <html lan..
JS——appendChild()和insertBefore()插入新节点区别
专注写bug
01-05 1953
文章目录前言appendChild(newchild)insertBefore(newchild, refchild)参考资料 前言 在html中，如果需要动态的插入数据标签(li、a等)，则需要使用到标题所示的appendChild()或insertBefore()来实现。 这两种方法都具有插入新元素至指定的容器中的功能，但他们却有很大的区别。 appendChild(newchild) appendChild()的字面意思append和child，从起名中可以看出，插入元素的位置为末尾。 向当前节点的
DOM基础之插入元素
ch_musk的博客
06-28 4033
插入元素有两种方法 1 appendChild() 2 insertBefore() 1.在JavaScript中我们可以使用appendChild()方法把一个新元素插入到父元素内部子元素的末尾 语法：A.appendChild(B); 说明： A代表父元素，B表示动态创建好的新元素，即子元素 实例 ``` <!DOCTYPE > <ht...
带你彻底学会JS DOM技术之创建，插入元素
大河之犬的博客
10-06 5049
所谓的“动态DOM”，指的是使用JavaScript创建的元素。来创建一个文本节点，然后可以将元素节点与文本节点“组装”成我们平常看到的“有文本内容的元素”。方法把已经创建好的“有内容的strong元素”插入到div元素中，这时才会显示出内容。动态创建了一个strong元素，但是此时strong元素是没有内容的。//将strong元素插入div元素（这个div在HTML已经存在）方法将一个新元素插入到父元素中的某一个子元素“之前”A表示父元素，B表示新子元素。把一个新元素插入到父元素的内部子元素的“末尾”
1.javaScript(JS)常用函数之 appendChild 和removeChild
yuxuan89814的专栏
08-29 4065
javaScript(JS)常用函数之 appendChild 和removeChild
浅谈JavaScript_DOM学习篇_图片切换小案例
12-12
今天开始学习DOM操作,下面写一个小案例来巩固下知识点. DOM: document object model (文档对象模型) 根据id获取页面元素 :　如:　var xx = document.getElementById(“id”); 根据标签获取元素:　如:　var xx = ...
Javascript入门学习第六篇 js DOM编程第1/2页
01-19
学习英文： Dom：文档对象模型。Document object model Bom：浏览器对象模型。 注：也可以叫窗口对象模型。（window object model.） API：应用编程接口。 注：DOM其实可以看作一种API。 Node：节点。 注：节点...
比较详细的javascript DOM 学习笔记第1/2页
12-08
本篇学习笔记主要探讨了DOM的基础知识，包括不同类型的节点以及如何访问和操作这些节点。 1. **DOM节点层次** - **Document**：作为整个文档的顶级节点，它包含了文档的全部内容。 - **DocumentType**：表示文档...
js中appendChild()用法
q285661571的专栏
04-11 6万+
实例：var div=document.createElement("div");//新建一个div元素节点     document.body.appendChild(div);//把div元素节点添加到body元素节点中成为其子节点，但是放在body的现有子节点的最后
appendChild 函数
liuyj_vv的博客
10-10 4424
appendChild() 方法向节点添加最后一个子节点。 appendChild() 方法从一个元素向另一个元素中移动元素。 <body> <button onclick="test1()">test1</button> <button onclick="test2()">test2</button> <butt...
js里用append()和appendChild有什么区别？
高先生的猫
06-16 8986
parentNode.append()是还在试用期的方法，有兼容问题。 是在parendNode节点中最后一个子节点后插入新Node或者DOMString（字符串，插入后为Text节点） 与parentNode.appendChild()的区别在于：parentNode.append()可以同时传入多个节点或字符串，没有返回值； 而parentNode.appendChild()只能传一个节点，且不直接支持传字符串 (需要parentNode.appendChild(document.creat...
append()方法_JavaScript DOM API中append和appendChild的三个不同点
weixin_36410141的博客
11-30 1274
append和appendChild是两个常用的方法，用于将元素添加到文档对象模型(DOM)中。它们经常可以互换使用，没有太多麻烦，但如果它们是一样的，那么为什么要出现两个API呢？……它们只是相似，但不是一样。append()此方法用于以Node对象或DOMString(基本上是文本)的形式添加元素。插入一个Node对象const parent = document.createElement(...
JavaScript中的appendChild（）方法
热门推荐
每天学习一点点
12-01 8万+
1.appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。 实例一： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt
DOM，创建节点appendChild()把B追加至A末尾
m0_49249339的博客
03-19 192
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <button onclick="addImg()">添加图片</button> ...
java Web第一章学习内容（节点，触发时间类型）
JayVergil的博客
05-31 279
一,        节点操作1.创建节点方法  document.createElement参考代码：var li = document.createElement("li"); 2.添加节点 A.appendChild(B)        把B节点插入到A节点的后面，里面不需要双引号参考代码：      li.appendChild(div);3.替换节点    parentNode.re...
DOM基础
cmyhahh的博客
06-23 163
DOM操作，可以简单理解成“元素操作” 我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作 1 节点类型 元素节点 属性节点 文本节点 注意： （1）.一个元素就是一个节点，这个节点称之为元素节点 （2）.属性节点和文本节点看起来是元素节点的一部分，实际上，他们是独立的节点，并不属于元素节点 （3).只有元素节点才可以拥有子节点，属性节点和文本节点都无法...
JS 利用appendChild对<li>标签进行排序
u010114513的博客
03-18 2982
按照从大到小排序appendChild: 假设父级a中已经有子节点b，那么a.appendChild(b)的作用是：1.先将子节点b从父级a中删除；2.再将子节点b添加到a中，放在最末尾。<body> <button id="bt1">提交</button> <ul id="ul1"> <li>32</li> <li>243</li>
【DOM】DOM操作之如何添加、删除、替换元素_04
青春木鱼的博客
05-19 7151
本文将详细介绍如何使用DOM操作添加、删除、替换元素。我们使用document.createElement("标签名")来创建元素，使用父元素.removeChild(子元素)来删除子元素。另外，用createElement创建的新元素对象，暂时是游离在内存中，并没有被加入到DOM树。而浏览器显示哪些元素，完全依照DOM树的内容来生成。所以，新元素不会被浏览器加载到页面上，用户暂时是看不到的！因此，今后只要创建新元素，最后一步都是将新元素添加到DOM树上指定的父元素下。
DOM学习精要与实战示例解析
以下是对DOM学习的总结： 1. 重新导航到指定地址： 在JavaScript中，可以使用`window.location.href`属性来改变当前页面的URL，实现页面的重定向。例如： ```javascript window.location.href = "//...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值