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 相关文章推荐
JavaScript中的Screen屏幕对象
Jan 16 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
AngularJS利用Controller完成URL跳转
Aug 09 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
微信小程序 检查接口状态实例详解
Jun 23 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 Javascript
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实现采集程序原理和简单示例代码
2007/03/18 PHP
smarty实现多级分类的方法
2014/12/05 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
Javascript之文件操作
2007/03/07 Javascript
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
vue 实现通过手机发送短信验证码注册功能
2018/04/19 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
python实现五子棋游戏
2019/06/18 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
新手学python应该下哪个版本
2020/06/11 Python
详解python中的异常和文件读写
2021/01/03 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
意外伤害赔偿协议书范本
2014/09/28 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
详解Python flask的前后端交互
2022/03/31 Python