JavaScript插入DOM
当我们获得了某个DOM节点,想在这个DOM节点内插入新的DOM,应该如何做?
如果这个DOM节点是空的,例如,<div></div>
,那么,直接使用innerHTML = '<span>child</span>'
就可以修改DOM节点的内容,相当于“插入”了新的DOM节点。
如果这个DOM节点不是空的,那就不能这么做,因为innerHTML
会直接替换掉原来的所有子节点。
有两个办法可以插入新的节点。一个是使用appendChild
,把一个子节点添加到父节点的最后一个子节点。例如:
<!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list"><p id="java">Java</p><p id="python">Python</p><p id="scheme">Scheme</p>
</div>
把<p id="js">JavaScript</p>
添加到<div id="list">
的最后一项:
varjs = document.getElementById('js'),list = document.getElementById('list');
list.appendChild(js);
现在,HTML结构变成了这样:
<!-- HTML结构 -->
<div id="list"><p id="java">Java</p><p id="python">Python</p><p id="scheme">Scheme</p><p id="js">JavaScript</p>
</div>
因为我们插入的js
节点已经存在于当前的文档树,因此这个节点首先会从原先的位置删除,再插入到新的位置。
更多的时候我们会从零创建一个新的节点,然后插入到指定位置:
varlist = document.getElementById('list'),haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);
这样我们就动态添加了一个新的节点:
<!-- HTML结构 -->
<div id="list"><p id="java">Java</p><p id="python">Python</p><p id="scheme">Scheme</p><p id="haskell">Haskell</p>
</div>
动态创建一个节点然后添加到DOM树中,可以实现很多功能。举个例子,下面的代码动态创建了一个<style>
节点,然后把它添加到<head>
节点的末尾,这样就动态地给文档添加了新的CSS定义:
var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);
可以在Chrome的控制台执行上述代码,观察页面样式的变化。
insertBefore
如果我们要把子节点插入到指定的位置怎么办?可以使用parentElement.insertBefore(newElement, referenceElement);
,子节点会插入到referenceElement
之前。
还是以上面的HTML为例,假定我们要把Haskell
插入到Python
之前:
<!-- HTML结构 -->
<div id="list"><p id="java">Java</p><p id="python">Python</p><p id="scheme">Scheme</p>
</div>
可以这么写:
varlist = document.getElementById('list'),ref = document.getElementById('python'),haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);
新的HTML结构如下:
<!-- HTML结构 -->
<div id="list"><p id="java">Java</p><p id="haskell">Haskell</p><p id="python">Python</p><p id="scheme">Scheme</p>
</div>
可见,使用insertBefore
重点是要拿到一个“参考子节点”的引用。很多时候,需要循环一个父节点的所有子节点,可以通过迭代children
属性实现:
vari, c,list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {c = list.children[i]; // 拿到第i个子节点
}
练习
对于一个已有的HTML结构:
- Scheme
- JavaScript
- Python
- Ruby
- Haskell
<!-- HTML结构 -->
<ol id="test-list"><li class="lang">Scheme</li><li class="lang">JavaScript</li><li class="lang">Python</li><li class="lang">Ruby</li><li class="lang">Haskell</li>
</ol>
按字符串顺序重新排序DOM节点:
'use strict';
// 测试:
;(function () {vararr, i,t = document.getElementById('test-list');if (t && t.children && t.children.length === 5) {arr = [];for (i=0; i<t.children.length; i++) {arr.push(t.children[i].innerText);}if (arr.toString() === ['Haskell', 'JavaScript', 'Python', 'Ruby', 'Scheme'].toString()) {console.log('测试通过!');}else {console.log('测试失败: ' + arr.toString());}}else {console.log('测试失败!');}
})();
Run
JavaScript插入DOM相关推荐
- JavaScript 插入Dom节点
大家好,今天我们来分享JavaScript 插入Dom节点 首先我们要知道, 不管我们对Dom节点进行什么样的操作,都必须先获取这个节点,假如说,这个dom节点是空的,我们可以通过innerHTML就 ...
- Javascript操作DOM常用API总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...
- JavaScript操作DOM对象
目录 一.DOM操作 (一).DOM操作分类 (二).节点和节点的关系 (三).访问节点 (四).节点信息 二.操作节点 (一)操作节点的属性 (二).创建和插入节点 (三).删除和替换节点 (四). ...
- 【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
- JavaScript中DOM操作
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
- JavaScript 之 DOM中的三大对象
下面是对JavaScript DOM中三大对象的整理,希望可以帮助到有需要的小伙伴. JavaScript 之 DOM中的三大对象 一.Document对象 1.Document对象是什么 Docum ...
- JavaScript操作DOM对象 Day05
JavaScript操作DOM对象 0 核心 浏览器网页就是一个Dom树形结构! 获取Dom节点:得到Dom节点 更新:更新Dom节点 添加:添加一个新的节点 删除:删除一个Dom节点 要操作一个Do ...
- JavaScript中DOM对象的详解
*** JavaScript中DOM对象的详解*** DOM对象:Document Object Model,文档对象模型.也称为document(文档对象),是HTML页面当前窗体的内容,是连接JS ...
- DHTML乌托邦:使用JavaScript和DOM的现代Web设计
动态HTML(简称DHTML)是一组Web开发技术的名称,这些技术主要用于具有非平凡用户输入功能的Web页面. DHTML意味着处理HTML文档的文档对象模型,在样式信息中摆弄CSS指令,并使用客户端 ...
最新文章
- mysql 配置执行计划_MySQL深入学习(二)--配置、索引、执行计划
- 接口(Interface)的深入理解
- 计算机无法安装系统,为什么计算机无法重新安装系统?
- Linux gcc编译c/c++基本过程
- vue 中的动态传参和query传参
- pytorch 和 tensorflow2.0 方法替换
- word 通配符_学会Word通配符,可以帮助我们批量处理好多事情
- 计算机硬件基础英语ppt,计算机硬件技术基础,computer hardware technology elements,音标,读音,翻译,英文例句,英语词典...
- 13.python中的字典
- 服务器 linux mysql5.7修改密码,navicat远程登录不了
- 洛谷 题解 P1757 【通天之分组背包】
- Java多线程第三节-线程的正确停止
- 又拍云引领云CDN加速 或成互联网刚性需求
- 乐学python靠谱吗_【乐学100】-乐学100怎么样|地址|成立时间-比网校
- 在线电影订票系统 - 数据库建模
- STM32 CAN通信的学习笔记总结(从小白开始)
- 当老人用保健品填补精神需求的时候,我们该谴责谁?
- i386 、x86_64 、ppc是指
- Windows系统上 如何生成 .tar.gz格式的压缩包
- SSL_2325 最小转弯问题
热门文章
- k8s pod分类、核心组件、网络模型、kubectl常用命令
- 2021山东上半年软考时间已定!!!
- [UE] 在虚幻中使用动画序列和分层骨骼混合简单实现角色看向
- 生物特征识别技术的标准化工作
- Matlab2017a中帮助文档无法设置为中文的一种解决办法
- python 生成诸如A001 A002 ... A100这样的序列
- 武汉软件工程职业学院计算机分数线,武汉软件工程职业学院录取分数线2021是多少分(附历年录取分数线)...
- 如何使用思维导图做计划?这样绘制思维导图的方法你使用过吗?
- Incapsula专业提供后门特洛伊保护
- spark学习基础篇1--spark概述与入门