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 学习笔记 element属性控制
Jul 23 Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
Nov 12 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
Nov 20 Javascript
微信JSSDK上传图片
Aug 23 Javascript
JavaScript设计模式初探
Jan 07 Javascript
React学习笔记之高阶组件应用
Jun 02 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 Javascript
JS实现打字游戏
Dec 17 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 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(2)
2006/10/09 PHP
聊天室php&amp;mysql(六)
2006/10/09 PHP
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
ajax实现动态下拉框示例
2017/01/10 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
微信小程序绑定手机号获取验证码功能
2019/10/22 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
python上selenium的弹框操作实现
2020/07/13 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
Python识别验证码的实现示例
2020/09/30 Python
介绍一下UNIX启动过程
2013/11/14 面试题
青年志愿者事迹材料
2014/02/07 职场文书
《狼》教学反思
2014/03/02 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
浅谈JavaScript作用域
2021/12/06 Javascript
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python