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 相关文章推荐
jQuery 表格工具集
Apr 25 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 Javascript
Openlayers实现点闪烁扩散效果
Sep 24 Javascript
Antd的table组件表格的序号自增操作
Oct 27 Javascript
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 5.4 你必须要知道的
2013/08/07 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
复制js对象方法(详解)
2013/07/08 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
图文讲解vue的v-if使用方法
2019/02/11 Javascript
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
pytorch 预训练层的使用方法
2019/08/20 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
导游的职业规划书范文
2013/12/27 职场文书
会计专业个人求职信范文
2014/01/08 职场文书
校园奶茶店创业计划书
2014/01/23 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
成绩单评语
2015/01/04 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
自荐信怎么写
2015/03/04 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers