• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >微信小程序 > JS添加元素新节点

JS添加元素新节点

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-11-30

匿名通过本文主要向大家介绍了javascript,节点,元素等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
这次给大家带来JS添加元素新节点,JS添加元素新节点的注意事项有哪些,下面就是实战案例,一起来看一下。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net - JS添加新节点的几种方法</title>
</head>
<body>
<p id="d">
<span id="s">
  1234567890
</span>
</p>
</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的p里
  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的异步加载详解

以上就是JS添加元素新节点的详细内容,更多请关注微课江湖其它相关文章!

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 如何实现小程序动画?小程序动画的实现方法
  • 微信小程序如何使用微信SlideView组件(附示例)
  • 微信小程序多层嵌套渲染列表及数据获取的代码
  • 微信小程序支持 cookie的代码实现
  • 什么是懒加载?小程序中图片懒加载的两种实现方法
  • 微信小程序中选项卡的实现方法
  • 微信小程序Page构造函数以及生命周期函数的内容解析(附代码)
  • 简单的微信小程序日历组件的实现(附完整代码)
  • 微信小游戏中如何实现转发&分享&获取头像&游戏圈四种功能
  • 小程序中如何实现分享功能 (代码示例)

相关文章

  • 2018-11-30微信小程序开发之图片拖拽功能的实现
  • 2018-11-30在小程序中如何使用npm包
  • 2017-06-20微信小程序妹子图片展示demo代码
  • 2018-11-30微信小程序中media标签详解
  • 2018-11-30分享一个清理内存卡和U盘里垃圾的小程序
  • 2018-11-30使用微信小程序开发一个弹窗页面的方法介绍
  • 2018-11-23微信小程序云开发API 构造正则对象
  • 2018-11-30微信小程序 页面跳转传参详解
  • 2018-11-30小程序开发之page()函数
  • 2018-11-30微信小程序开发录音功能

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • [小程序]开发的第一个小程序之经验分享
    • 微信小程序实现拖拽 image 触摸事件监听
    • 浅谈View组件实例详解
    • 小程序开发运营必看:微信小程序平台运营规范
    • 微信小程序前端源码的解析
    • 微信小程序是用什么语言开发的 微信小程序开发语言可以用php吗
    • 小程序开发的图文详解
    • 微信小程序轮播图功能开发实例
    • webpack如何动态引入文件
    • 微信小程序canvas的详情介绍

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有