JS实现的DOM插入节点操作示例


Posted in Javascript onApril 04, 2018

本文实例讲述了JS实现的DOM插入节点操作。分享给大家供大家参考,具体如下:

一 介绍

插入节点通过使用insertBefore()方法来实现。

insertBefore()方法将在另一个子节点前插入新的子节点。

obj.insertBefore(new,ref)

new:表示新的子节点。
ref:指定一个节点,在这个节点前插入新的节点。

二 应用

插入节点,本示例在页面的文本框中输入需要插入的文本,然后通过单击“前插入”按钮将文本插入到页面中。

三 完整示例代码:

<!DOCTYPE html>
<html>
<head>
<title>3water.com 插入节点</title>
<script language="javascript">
 <!--
 function crNode(str)
 {
  var newP=document.createElement("p");
  var newTxt=document.createTextNode(str);
  newP.appendChild(newTxt);
  return newP;
 }
 function insetNode(nodeId,str)
 {
   var node=document.getElementById(nodeId);
   var newNode=crNode(str);
   if(node.parentNode) //判断是否拥有父节点
   node.parentNode.insertBefore(newNode,node);
 }
 -->
</script>
</head>
<body>
 <h2 id="h">在上面插入节点</h2>
 <form id="frm" name="frm">
 输入文本:<input type="text" name="txt" />
 <input type="button" value="前插入" onclick="insetNode('h',document.frm.txt.value);" />
 </form>
</body>
</html>

四 运行结果

JS实现的DOM插入节点操作示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
文件上传插件SWFUpload的使用指南
Nov 29 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
vue动态绑定style样式
Apr 20 Vue.js
AngularJS 应用模块化的使用
Apr 04 #Javascript
vue todo-list组件发布到npm上的方法
Apr 04 #Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 #Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 #Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 #Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 #Javascript
vue cli升级webapck4总结
Apr 04 #Javascript
You might like
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
javascript的push使用指南
2014/12/05 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
Python struct模块解析
2014/06/12 Python
在Django框架中设置语言偏好的教程
2015/07/27 Python
python select.select模块通信全过程解析
2017/09/20 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
Python将图片转换为字符画的方法
2020/06/16 Python
在Python中使用Neo4j的方法
2019/03/14 Python
Python colormap库的安装和使用详情
2020/10/06 Python
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
运动会800米加油稿
2014/02/22 职场文书
给校长的建议书100字
2014/05/16 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
pytorch 实现变分自动编码器的操作
2021/05/24 Python
解析MySQL索引的作用
2022/03/03 MySQL
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL