JS简单添加元素新节点的方法示例


Posted in Javascript onFebruary 10, 2018

本文实例讲述了JS简单添加元素新节点的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com - JS添加新节点的几种方法</title>
</head>
<body>
<div id="d">
<span id="s">
  1234567890
</span>
</div>
</body>
<script type="text/javascript">
  //首先找到Id为d的元素
  var d=document.getElementById('d');
  //创建一个节点
  var a=document.createElement('a');
  //设置a的属性
  a.href='https://www.baidu.com/';
  a.innerText='ggggg';
  //添加元素  将创建的节点添加到Id为d的div里
  d.appendChild(a);
  //在指定节点前插入新节点
  var p=document.createElement('p');
  //添加文本内容
  p.innerText='ppppppppppppppppp';
  //d.appendChild(p);
  //参数1:要添加的元素 参数2:要放到哪个节点的前面
  d.insertBefore(p,a);
  //获取目标元素
  var s=document.getElementById('s');
  //克隆新元素
  var spanc= s.cloneNode(true);//默认参数是false
  d.appendChild(spanc);
</script>
</html>

运行效果截图:

JS简单添加元素新节点的方法示例

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

Javascript 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Oct 11 Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 Javascript
提示$ is not defined错误分析及解决
Apr 09 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 Javascript
jquery插件实现搜索历史
Apr 24 jQuery
vue.js系列中的vue-fontawesome使用
Feb 10 #Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 #jQuery
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 #Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 #Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 #Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 #Javascript
Vue组件和Route的生命周期实例详解
Feb 10 #Javascript
You might like
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
点击广告后才能获得下载地址
2006/10/26 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
Python使用redis pool的一种单例实现方式
2016/04/16 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
django Serializer序列化使用方法详解
2018/10/16 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
python做反被爬保护的方法
2019/07/01 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
python实现手势识别的示例(入门)
2020/04/15 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
模具专业毕业推荐信
2014/03/08 职场文书
如何写一份好的英文求职信
2014/03/19 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
JavaScript流程控制(循环)
2021/12/06 Javascript
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏