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

 更新时间:2018年04月04日 10:58:38   作者:chengqiuming   我要评论
这篇文章主要介绍了JS实现的DOM插入节点操作,结合实例形式分析了javascript针对页面dom元素动态操作相关实现技巧,需要的朋友可以参考下

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

一 介绍

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

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

obj.insertBefore(new,ref)

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

二 应用

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

三 完整示例代码:

<!DOCTYPE html>
<html>
<head>
<title>www.jb51.net 插入节点</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>

四 运行结果

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

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

相关文章

  • escape函数解决js中ajax传递中文出现乱码问题

    escape函数解决js中ajax传递中文出现乱码问题

    这篇文章主要介绍了escape函数解决js中ajax传递中文出现乱码问题,是非常实用的技巧,需要的朋友可以参考下
    2014-10-10
  • JS如何实现网站中PC端和手机端自动识别并跳转对应的代码

    JS如何实现网站中PC端和手机端自动识别并跳转对应的代码

    这篇文章主要介绍了JS如何实现网站中PC端和手机端自动识别并跳转对应的代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 快速搭建React的环境步骤详解

    快速搭建React的环境步骤详解

    本篇文章主要介绍了快速搭建React的步骤详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • js实现局部页面打印预览原理及示例代码

    js实现局部页面打印预览原理及示例代码

    js 如何打印预览,实局部打印页面很简单。就是把你需要打印的部分做一个起始标记,下面有个示例大大家不妨参考下
    2014-07-07
  • 详解微信小程序开发之城市选择器 城市切换

    详解微信小程序开发之城市选择器 城市切换

    这篇文章主要介绍了详解微信小程序开发之城市选择器 城市切换,非常具有实用价值,需要的朋友可以参考下。
    2017-01-01
  • js简单判断flash是否加载完成的方法

    js简单判断flash是否加载完成的方法

    这篇文章主要介绍了js简单判断flash是否加载完成的方法,通过PercentLoaded方法对flash的加载进行判断,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • Json解析的方法小结

    Json解析的方法小结

    本文给大家带来了json解析方法小结的知识,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-06-06
  • js实现图片放大并跟随鼠标移动特效

    js实现图片放大并跟随鼠标移动特效

    这篇文章主要为大家详细介绍了js实现图片放大并跟随鼠标移动特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-01-01
  • 代码触发js事件(click、change)示例应用

    代码触发js事件(click、change)示例应用

    Chrome , Firfox 不支持fireEvent的方法可以使用dispatchEvent的方法替代,直接给一个兼容的Code,下面有个不错的示例,喜欢的朋友可以收藏下
    2013-12-12
  • 再谈javascript原型继承

    再谈javascript原型继承

    Javascript原型继承是一个被说烂掉了的话题,但是自己对于这个问题一直没有彻底理解,今天花了点时间又看了一遍《Javascript模式》中关于原型实现继承的几种方法,下面来一一说明下,在最后我根据自己的理解提出了一个关于继承比较完整的实现。
    2014-11-11

最新评论