HTML DOM - 元素
添加、删除和替换 HTML 元素。
创建新的 HTML 元素 - appendChild()
如需向 HTML DOM 添加新元素,您首先必须创建该元素,然后把它追加到已有的元素上。
实例
<div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div><script> var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node);var element=document.getElementById("div1"); element.appendChild(para); </script>
亲自试一试
例子解释
这段代码创建了一个新的 <p> 元素:
var para=document.createElement("p");
如需向 <p> 元素添加文本,您首先必须创建文本节点。这段代码创建文本节点:
var node=document.createTextNode("This is a new paragraph.");
然后您必须向 <p> 元素追加文本节点:
para.appendChild(node);
最后,您必须向已有元素追加这个新元素。
这段代码查找到一个已有的元素:
var element=document.getElementById("div1");
这段代码向这个已存在的元素追加新元素:
element.appendChild(para);
创建新的 HTML 元素 - insertBefore()
上一个例子中的 appendChild() 方法,将新元素作为父元素的最后一个子元素进行添加。
如果不希望如此,您可以使用 insertBefore() 方法:
实例
<div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div><script> var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node);var element=document.getElementById("div1"); var child=document.getElementById("p1"); element.insertBefore(para,child); </script>
亲自试一试
删除已有的 HTML 元素
如需删除 HTML 元素,您必须清楚该元素的父元素:
实例
<div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.removeChild(child); </script>
亲自试一试
例子解释
这个 HTML 文档包含一个带有两个子节点(两个 <p> 元素)的 <div> 元素:
<div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div>
查找 id="div1" 的元素:
var parent=document.getElementById("div1");
查找 id="p1" 的 <p> 元素:
var child=document.getElementById("p1");
从父元素中删除子元素:
parent.removeChild(child);
提示:能否在不引用父元素的情况下删除某个元素?
很抱歉。DOM 需要了解您需要删除的元素,以及它的父元素。
这里提供一个常用的解决方法:找到您需要删除的子元素,然后使用 parentNode 属性来查找其父元素:
var child=document.getElementById("p1"); child.parentNode.removeChild(child);
替换 HTML 元素
如需替换 HTML DOM 中的元素,请使用 replaceChild() 方法:
实例
<div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div><script> var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node);var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.replaceChild(para,child); </script>
HTML DOM - 元素相关推荐
- js中Dom元素及获取方法
DOM基础对象 document document.documentElement html部分 document.head document.title document.body body部分 ...
- 【EASYDOM系列教程】之 DOM 元素树
DOM 元素树结构与 DOM 节点树结构很相似,区别仅在于是利用节点解析 HTML 元素,还是利用元素解析 HTML 元素. DOM 树结构 还记得下面这张图吗? 上图中的 HTML 页面源代码如下: ...
- JavaScript获取DOM元素位置和尺寸大小
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript ...
- vue获取dom元素注意问题
mounted(){setTimeout(()=>{this.contentToggle();},1000)},methods:{contentToggle(){console.log(this ...
- JavaScriptjQuery.查询DOM元素
查询DOM元素 查询单个元素document.getElementById <!DOCTYPE html> <html> <head> <title>访 ...
- android 一维数组遍历,$.each()循环遍历一维数组、二维数组、JSON数据和DOM元素
本文介绍$.each()循环遍历一维数组.二维数组.JSON数据和DOM元素. 请注意在使用JQuery $.each()方法前,要首先引用jquery库文件. $.each()循环遍历一维数组 Jq ...
- 不变违规:_registerComponent(...):目标容器不是DOM元素
本文翻译自:Invariant Violation: _registerComponent(-): Target container is not a DOM element I get this e ...
- Jquery加载dom元素
JQuery加载DOM元素 使用JQuery的第一件事就是下载jquery库,并调成Jquery库! <script src="js/jquery-1.7.1.min.js" ...
- JS获取DOM元素的八种方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...
- javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight ...
最新文章
- 在Hinton看来是“宇宙答案”GPT-3,到LeCun这里却“对世界一无所知”
- 区域显示触发_Unity3D 在Hierarchy窗口中显示物体所属Layer
- java----八种排序算法
- linux命令:nslookup 、tar、route , tracert, traceroute, netstat、write、mesg、touch
- 前端学习(597):查看和调试cookie
- 用R命令看一下各个寄存器的设置情况
- Atitit opencv版本新特性attilax总结
- pip下载速度慢的解决方法
- 国内主要安全产品及厂商
- 为什么编辑器打开PDF文档后提示缺少字体
- 魏尔斯特拉斯函数与分形图形的动画演示
- API是什么意思,具体是什么?
- winrar 破解方法
- 尺寸工程分析软件-尺寸公差分析软件-尺寸链计算软件
- 中国象棋对局软件设计(一)
- SpringBoot整合knife 4j
- 银行卡收单____单边账带(长款带来的收益)
- Android 毕业设计高仿抖音(视频类App)(内附源码)
- Android 解屏幕锁与点亮屏幕(来电时效果)
- mouseover和mouseout事件在鼠标经过子元素时也会触发
热门文章
- 【Linux 内核 内存管理】内存管理架构 ① ( 内存管理架构组成 | 用户空间 | 内核空间 | MMU 硬件 | Linux 内核架构层次 | Linux 系统调用接口 )
- 【数字信号处理】线性时不变系统 LTI “ 输入 “ 与 “ 输出 “ 之间的关系 ( 线性卷积计算案例二 | 计算 卷积 )
- 【Android 逆向】Android 系统文件分析 ( cpuinfo 处理器信息文件 | self 当前进程信息文件 | meminfo 当前内存信息文件 )
- 【错误记录】Android Studio 的 Flutter 代码界面没有 Logcat 面板 ( 2021年08月28日最新解决方案 )
- 【Android FFMPEG 开发】FFMPEG 方法中指针类型参数说明 ( 一维指针类型参数 | 二维指针类型参数 )
- 【Android FFMPEG 开发】Android Studio 工程配置 FFMPEG ( 动态库打包 | 头文件与函数库拷贝 | CMake 脚本配置 )
- 【C++ 语言】线程 ( 线程创建方法 | 线程标识符 | 线程属性 | 线程属性初始化 | 线程属性销毁 | 分离线程 | 线程调度策略 | 线程优先级 | 线程等待 )
- 10件开发者和老板都要知道的HTML5的那些事
- DOSBOX使用的一些方法和注意点(汇编实验中遇到的)
- 汇编语言中的乘除法用到的寄存器问题(较详细解析)(用到AX和DX,乘数和除数用其他寄存器和存储器)