讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > js教程 > 正文

javascript dom 基本操作小结_javascript技巧

php中文网
发布： 2016-05-16 18:29:44
原创
1000人浏览过

自己平时可能也会经常遇到所以总结如下：
1，dom元素的创建
2，dom元素的插入
3，dom元素替换
4，dom元素的删除

首先页面上有这么些简单的dom元素

doxygen 官方手册
doxygen 官方手册

doxygen是一款好用的程序员辅助工具，它可以让程序添加批添代码更加简单轻松，兼容C++、 C、Java、 Objective-C、Python等主流编程语言，小编提供的doxygen中文手册包含了基本介绍、语法技巧以及进阶技巧等内容，可以让你快速上手操作，有需要的欢迎下载。 基本介绍 Doxygen已经支持生成ANSI编码的chm目录文件(index.hhc)!Doxygen通常是用作生成英文文档的，生成中文文档需要修改输入和输出的码制，这样可以改变解析方式，生成中文文档。但是，你必须意识 到，Dox

doxygen 官方手册 0
查看详情 doxygen 官方手册

　　
aaaaaaaa

　　
bbbbbbbb

　　
ccccccccc


接下来我们创建一个div元素，js代码：
var div_d = document.createElement('div');
div_d.innerHTML = "dddddddd";
div_d.id = "d";
//这里不用innerText为了避免浏览器兼容引发一些问题；
然后把创建的这个id为d 的div插到dom元素id为b的div的前面
var div_wrap = document.getElementById('wrap');
var div_b = document.getElementById('b');
div_wrap.insertBefore(div_d,div_b);
如果直接插到id为wrap的子元素后面则可以这样：
div_wrap.insertBefore(div_d,null);

如果是替换掉div_b则如下：
div_wrap.replaceChild(div_d,div_b);
最后我们删除指定的一个元素id为b的div
div_b.parentNode.removeChild(div_b);
或者
document.body.removeChild(div_b);
后续可能有很多衍生的方法及应用这里暂时不继续写下去了

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：javascript 实现页面加载进度条代码_javascript技巧 下一篇：!DOCTYPE声明对JavaScript的影响分析_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
如何用Javascript实现状态管理？ JavaScript状态管理核心是让数据变化可追踪、可预测、可复用；通过集中state对象存储、setState统一更新、发布-订阅通知视图、封装createStore或Store类、异步用action控制三态、派生状态实时计算或缓存来实现。
2025-12-23 13:09:10
849
javascript中如何进行模块化开发_ES6模块与CommonJS有什么区别？ JavaScript模块化开发核心是拆分代码为独立可复用单元，ES6模块（静态解析、顶层导入、实时绑定）与CommonJS（动态加载、运行时require、值拷贝）在语法、时机、环境和行为上存在本质差异，二者不可混用但可通过工具桥接。
2025-12-23 13:06:10
328
javascript如何实现自动完成功能_搜索算法怎样优化 自动完成功能核心是输入监听+快速匹配+结果渲染，需用防抖（200–300ms）避免频繁触发，通过setTimeout清除前次定时器，仅执行最后一次输入后的搜索。
2025-12-23 12:58:03
235
JavaScript中如何操作历史记录_historyAPI JavaScript中HistoryAPI通过pushState()、replaceState()和popstate事件实现SPA路由控制：pushState添加历史记录并改URL，replaceState替换当前记录，popstate监听前进/后退并读取state。
2025-12-23 12:45:09
487
javascript生成器函数是什么_yield关键字如何控制执行流程？ JavaScript生成器函数用function声明，调用返回生成器对象，通过next()暂停/恢复执行并yield按需产出值，支持传参接收、嵌套逻辑及yield委托复用。
2025-12-23 12:42:08
216
什么是Javascript的WeakMap和WeakSet？ WeakMap和WeakSet是JavaScript中支持弱引用的集合类型，WeakMap键必须为对象且不可遍历、无size，用于私有元数据缓存；WeakSet仅存对象、不可遍历、无size，适用于对象状态标记，二者均避免内存泄漏。
2025-12-23 12:40:02
780
什么是JavaScript中的解构赋值？ JavaScript解构赋值是ES6引入的按模式从数组或对象提取值并赋给变量的语法，核心为简洁与清晰：数组按位置、对象按属性名匹配，支持默认值、重命名、嵌套及剩余运算符。
2025-12-23 11:48:03
945
什么是事件循环队列_javascript中微任务和宏任务如何区分？ JavaScript事件循环按“执行一个宏任务→清空所有微任务→渲染→取下一个宏任务”顺序运行；宏任务包括script、setTimeout等，微任务包括Promise.then、queueMicrotask等，微任务优先级更高且本轮持续执行直至队列为空。
2025-12-23 11:37:23
257
javascript如何实现代码混淆_保护源码有哪些方法 JavaScript无法完全防止源码被查看，但可通过混淆（如Terser、javascript-obfuscator）、服务端逻辑下沉、动态加载、SourceMap脱离及反调试等分层手段提升逆向成本；禁用右键或Base64编码等做法无效。
2025-12-23 11:35:02
853
JavaScript如何操作浏览器历史记录？ JavaScript通过window.history实现SPA无刷新导航：pushState添加历史记录并更新URL，replaceState修改当前记录，popstate监听前进/后退，back/forward/go提供基础导航，均受同源策略限制。
2025-12-23 11:20:02
844
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部