创建HTML元素

  document.appendChild()
  将新元素作为父元素的最后一个子元素进行添加
  如需向HTML DOM添加新元素,首先必须创建该元素,然后把它追加到已有的元素上

var newElement = document.createElement("p")   //创建新元素p
var newTextNode = document.createTextNode("文本节点") //创建新文本节点
newElement.appendChild(newTextNode) //向 <p> 元素追加文本节点 var element = document.getElementById("div_id")
element.appendChild(newElement)

  document.insertBefore()

  该方法可以在指定位置创建新元素

var newElement=document.createElement("p");
var newTextNode=document.createTextNode("文本节点");
newElement.appendChild(newTextNode); var element=document.getElementById("div_id");
var child=document.getElementById("p1");
element.insertBefore(newElement,child); //将newElement插入到child节点前

删除HTML元素

  document.removeChild()

    var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child); /*
要想删除一个元素必须要通过父元素调用removeChild()方法实现
如果确定删除的元素但不确定父元素,可通过以下方式实现
即通过parentNode属性获取父元素,然后再调用removeChild()方法实现 var child=document.getElementById("p1");
child.parentNode.removeChild(child);
*/

替换HTML元素

  document.replaceChild()

    var parent=document.getElementById("div1");
var child=document.getElementById("p1");
var para=document.createElement("p");
var node=document.createTextNode("这是一个新的段落。");
para.appendChild(node);
parent.replaceChild(para,child);

HTML DOM的创建,删除及替换的更多相关文章

  1. Javascript:DOM动态创建元素实例应用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Dom 获取、Dom动态创建节点

    一.Dom获取 1.全称:Document     Object     Model 文档对象模型 2.我们常用的节点类型 元素(标签)节点.文本节点.属性节点(也就是标签里的属性). 3.docum ...

  3. Android零基础入门第87节:Fragment添加、删除、替换

    前面一起学习了Fragment的创建和加载,以及其生命周期方法,那么接下来进一步来学习Fragment的具体使用,本期先来学习Fragment添加.删除.替换. 一.概述 在前面的学习中,特别是动态加 ...

  4. 二叉排序树(BST)创建,删除,查找操作

    binary search tree,中文翻译为二叉搜索树.二叉查找树或者二叉排序树.简称为BST 一:二叉搜索树的定义 他的定义与树的定义是类似的,也是一个递归的定义: 1.要么是一棵空树 2.如果 ...

  5. JS截取,删除,替换字符串常用方法详细

    删除和替换是一样的,开始用的是,如果是删除就直接替换为空 arr="abc001abc002abc003" arr.replace('abc','123') 结果发现只能替换第一个 ...

  6. JavaScript DOM动态创建(声明)Object元素

    http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...

  7. android使用mount挂载/system/app为读写权限,删除或替换系统应用

    注意:以下代码中#开头的则为需要执行的shell命令,其他的为打印的结果.#代表需要使用ROOT权限(su)执行,所以想要修改您android手机某个目录挂载为读写,首先需要有ROOT权限! 先要得到 ...

  8. 在后台对GameObject进行"创建"||"删除"动作

    在后台对GameObject进行"创建"||"删除"动作 建立 public GameObject Pre;//在编辑器中用来绑定的Prefabs public ...

  9. Javascript:splice()方法实现对数组元素的插入、删除、替换及去重

    定义和用法 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. 注释:该方法会改变原始数组. 语法: Array.prototype.splice(index,count[,el ...

  10. Swift字符串的插入、删除和替换-备

    对应可变字符串可以插入.删除和替换,String提供了几个方法可以帮助实现这些操作.这些方法如下: splice(_:atIndex:).在索引位置插入字符串. insert(_:atIndex:). ...

随机推荐

  1. 【Android - 控件】之MD - RecyclerView的使用

    RecyclerView是Android 5.0新特性——Material Design中的一个控件,它将ListView.GridView整合到一起,可以使用极少的代码在ListView.GridV ...

  2. HTML+Jquery实现多图片上传预览功能

    HTML:使用input的onchange事件,它一改变就触发事件 <p id="p3"> <input name="File" onchan ...

  3. Python基础之第三方库gevent安装

    安装gevent库: 想要安装gevent库,我们需要确定pip版本: 使用 pip3 list: 我们可以发现pip版本为19.3.1,如果你们的pip版本不是最新版可以使用命令python -m ...

  4. “setTimeout、Promise、Async/Await 的区别”题目解析和扩展

    解答这个题目之前,先回顾下JavaScript的事件循环(Event Loop). JavaScript的事件循环 事件循环(Event Loop):同步和异步任务分别进入不同的执行"场所& ...

  5. MyBatis框架的基本配置

    MyBatis的基本配置文件: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE config ...

  6. BZOJ 1191: [HNOI2006]超级英雄Hero(二分图匹配)

    1191: [HNOI2006]超级英雄Hero Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 6263  Solved: 2799[Submit][ ...

  7. 【Koa】385- koa框架的快速入门与使用

    点击上方"前端自习课"关注,学习起来~ 简介 Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小. ...

  8. hbuilder/hbuilderx 无法检测到模拟器

    常用模拟器的端口 夜神模拟器 端口号 :62001 海马玩模拟器 端口号:26944 网易mumu模拟器端口号:7555 天天模拟器 端口号:6555 AndroidStudio自带模拟器 端口号: ...

  9. Oracle - 通过dg,完成单实例到rac的迁移

    一.概述 本文将介绍如何给单实例搭建一个rac dg,以及如何对其进行角色转换,完成从单实例到rac的迁移.预先具备的知识(rac搭建,单实例-单实例dg搭建) 二.实验环境介绍 主库(已有数据库实例 ...

  10. debian官网qcow2镜像修改root账号密码,开启ssh等

    1.下载官网qcow2镜像文件 wget http://172.16.20.10/vmtemplate/KVM/wangrui/Debian/debian-10.2.0-openstack-amd64 ...