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 操作cookies及正确使用cookies的属性
Oct 15 Javascript
JavaScript中获取元素索引的函数
Sep 10 Javascript
json数据与字符串的相互转化示例
Sep 18 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
使用angular写一个hello world
Jan 23 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 Javascript
原生JavaScript实现轮播图
Jan 10 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
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
理解javascript异步编程
2016/01/27 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
jQuery手风琴的简单制作
2017/05/12 jQuery
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
微信小程序如何使用globalData的方法
2019/06/06 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
python标准日志模块logging的使用方法
2013/11/01 Python
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
详解Python中的Cookie模块使用
2015/07/06 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
中级会计职业生涯规划范文
2014/01/16 职场文书
五好家庭事迹材料
2014/12/20 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python
室外天线与收音机天线杆接合方法
2022/04/05 无线电
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle