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

创建新的 HTML 元素

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

实例

<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div> <script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node); var element=document.getElementById("div1");
element.appendChild(para);
</script>

 

例子解释:

这段代码创建新的 <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 元素,您必须首先获得该元素的父元素:

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div> <script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

  

  

  

  

 

js 节点操作的更多相关文章

  1. js节点操作实例

    写了一个简单的小例子来引用js实例 1. 初步节点操作: 2.兼容性节点操作: 3.节点的类型,名字: 4.使用setAttribute设置属性 5.节点复制操作: 6.删除和替换节点 如有错误,还望 ...

  2. js节点操作

    在看<javascript高级程序设计>,看到节点操作这一块,觉得我只知道用appendChild(),太肤浅了,记录下学到的东西. 每个节点都有一个 parentNode 属性,该属性指 ...

  3. JS节点操作(JS原生+JQuery)

    JavaScript与JQuery节点操作   节点关系与类型 任何HTML元素,都有nodeType属性.值有1~12,常用的有: 1.元素节点 2.文本节点 8.注释节点 9.document节点 ...

  4. 原生JS节点操作

    获取子节点 1. children 不是标准的dom属性,但是几乎被所有浏览器支持.获取子元素的元素节点(只包括元素节点) 注意:在IE中,children包含注释节点. 2. childNodes ...

  5. js 节点 document html css 表单节点操作

    js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...

  6. JS Dom节点操作demo!

    通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...

  7. 原生JS和jQuery中基本的节点操作

    js中节点操作**document.createElement()**用来生成网页元素节点,参数为元素的标签名: **document.createTextNode()**用来生成文本节点,参数为所要 ...

  8. JS DOM操作(创建、遍历、获取、操作、删除节点)

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  9. js教程系列32 :javascript-DOM节点操作

    1 DOM节点操作 1.1 创建节点 createElement() var createDiv = document.createElement("div"); 1.2 插入子节 ...

随机推荐

  1. js中的事件委托和事件代理详解

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

  2. [python学习篇][系统学习][1]python标准库中文、英文网址(一些内建函数,标准库都可以在这里查找)

    http://docspy3zh.readthedocs.io/en/latest/library/   半中文网址 http://usyiyi.cn/translate/python_278/lib ...

  3. Unity3D - UGUI组件的中英文对照

  4. div固定在屏幕底部

    项目中需要实现div一直显示在屏幕的底部,不管页面有多长或者多端都需要满足. 在网上找的用js实现的,移动时会闪动,效果不是特别好.也可能是没找到好的. 相比js,我更希望使用css实现 1 < ...

  5. 找不到css 路径问题

    今天进入一个网页的时候,一直报找不到css的错误,但是我的路径原来是正确的 后来找网络控制台,发现路径上多了一个listCommodity,是我controller里面的跳到这个页面的路径 然后我在& ...

  6. iOS开发,最新判断是否是手机号的正则表达式

    最近项目里需要判断是否为手机号并发送验证码的功能,一下是实现方法.不过这个方法还是有些不足,只能判断输入的11位数的号段是否正确,无法判断手机号是否存在.不过勉强可以使用! + (NSString * ...

  7. 【Luogu】P3355骑士共存问题(最小割)

    题目链接 像题面那样把棋盘染成红黄点.发现骑士迈一步能到达的点的颜色一定是跟他所在的格子的颜色不同的.于是(woc哪来的于是?这个性质有这么明显吗?)从源点向所有红点连边,从所有黄点向汇点连边,红点向 ...

  8. 刷题总结——运输计划(bzoj4326)

    题目: 题目背景 NOIP2015 提高组 Day2 T3 题目描述 公元2044年,人类进入了宇宙纪元. L国有 n 个星球,还有 n-1 条双向航道,每条航道建立在两个星球之间,这 n-1 条航道 ...

  9. 算法复习——哈希表+折半搜索(poj2549)

    搬讲义~搬讲义~ 折半搜索感觉每次都是打暴力时用的啊2333,主要是用于降次··当复杂度为指数级别时用折半可以减少大量复杂度··其实专门考折半的例题并不多···一般都是中途的一个小优化··· 然后折半 ...

  10. Linux System Programming 学习笔记(九) 内存管理

    1. 进程地址空间 Linux中,进程并不是直接操作物理内存地址,而是每个进程关联一个虚拟地址空间 内存页是memory management unit (MMU) 可以管理的最小地址单元 机器的体系 ...