添加和删除节点(HTML 元素)

创建新的 HTML 元素 

如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。

例如:这段代码创建新的 <p> 元素:
var para=document.createElement("p");
如需向 <p> 元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:
var node=document.createTextNode("这是新段落。");
然后您必须向 <p> 元素追加这个文本节点:
para.appendChild(node);
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素:
var element=document.getElementById("div1");
这段代码向这个已有的元素追加新元素:
element.appendChild(para);

  

删除已有的 HTML 元素

如需删除 HTML 元素,您必须首先获得该元素的父元素:

例子解释:
这个 HTML 文档含有拥有两个子节点(两个 <p> 元素)的 <div> 元素:
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
找到 id="div1" 的元素:
var parent=document.getElementById("div1");
找到 id="p1" 的 <p> 元素:
var child=document.getElementById("p1");
从父元素中删除子元素:
parent.removeChild(child);

 提示:如果能够在不引用父元素的情况下删除某个元素,就太好了。

不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。

这是常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素:

        var child=document.getElementById("p1");
child.parentNode.removeChild(child);
 

JavaScript HTML DOM 元素(节点)的更多相关文章

  1. JavaScript HTML DOM 元素(节点)

    JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...

  2. JavaScript HTML DOM元素节点常用操作接口

    在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...

  3. JavaScript之DOM创建节点

    上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法,当我们获取到了这些对象之后,下一步将对这些对象进行更改,在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效果.具体js中可以修改D ...

  4. JavaScript HTML DOM 元素操作(节点)

      在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点 ...

  5. JavaScript 要点(十四)HTML DOM 元素(节点)

    A.创建新的 HTML 元素 如需向 HTML DOM 添加新元素,必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. <div id="div1"> ...

  6. JavaScript获取DOM元素位置和尺寸大小

      在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScri ...

  7. JavaScript的DOM操作(节点操作)

    创建节点createElement()var node = document.createElement(“div”);没什么可说的,创建一个元素节点,但注意,这个节点不会被自动添加到文档(docum ...

  8. javascript中获取元素节点的文本

    <div id="test"> <strong>i'm strong</strong> </div> 1.elementNode.i ...

  9. 【面试必备】javascript操作DOM元素

    前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...

随机推荐

  1. jquery防止事件冒泡和取消默认行为案例

    ----------------js取消事件冒泡: window.event.cancelBubble=true; --------------jquery事件参数可以防止事件冒泡: $(" ...

  2. {{angular.js 使用技巧}} - 实现计算列属性

    前端MV*框架现在有很多,其中某些框架有计算列(又叫监控属性),比如:微软推荐的 Knockout.js 和博客园司徒正美的 avalon.js 框架. 本人只使用过 Knockout.js,aval ...

  3. Node填坑教程——简易http服务器

    我们这一期做一个简易的http服务器. 先建一个文件夹,就算是一个空的项目了.然后新建app.js和package.json文件. 这样一个简易项目的基本文件就建好了. 通过命令行工具,在项目路径下输 ...

  4. 重温HTML的基础

    新年新气象,新的一年要有自己的学习计划与工作计划.希望大家能够共享. 经过一段时间,我想重新复习与学习一下HTML的基础,我呢打算整理一下W3C里面的知识,也许对某些人没有任何作用,但是对我来说这是我 ...

  5. AIX errpt命令说明

    查看系统的错误记录 在系统运行时,一些系统错误会记录在errlog 中,其中有些错误还会在终端上显示.检查错误日志可用以下命令: # errpt IDENTIFIER  TIMESTAM P  T  ...

  6. 【ios开发】图片拉伸

    最近在做一个项目 其中要自己定制一个View 如图: 但是美工给了我的图片尺寸却是不一样的. 分别是599*80  26*61 于是就成了这样的效果. 很明显的发现取消四周不对劲. 于是我就去找美工姐 ...

  7. Caliburn Micro框架

    Caliburn Micro框架快速上手(WP)   一.使用nuget添加起始工程 二.修改App.xaml文件和App.xaml.cs文件 AppBootstrapper介绍: AppBootst ...

  8. Web Builder

    Web Builder http://www.doc88.com/p-1748774598960.html 初次接触Infopath,我就被它的强大的功能,灵活的表单制作方式,全面对Web Servi ...

  9. .NET面向对象特性之封装

    .NET面向对象特性之封装 面向对象的基本内容由:类.对象.属性.方法.字段构成. 面向对象的三大特性:继承.多态.封装. 关于面向对象的特性很多人都把目光转向了继承.多态和接口,却很少有人提及过封装 ...

  10. [原]iOS Makefile Template

    export DEVELOPER_DIR := $(shell xcode-select --print-path) PLATFORM="$(DEVELOPER_DIR)/Platforms ...