添加和删除节点(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. pip安装超时,更换国内镜像源安装

    pip安装超时问题 pip install --index 源地址 安装包 常用镜像源地址: http://pypi.douban.com/ 豆瓣 http://pypi.mirrors.ustc.e ...

  2. xml和pandas结合处理的一个小例子-待完善

    #!/usr/bin/env python3 # -*- coding:utf-8 -*- import pandas import json import xml.etree.ElementTree ...

  3. 【bzoj1163/bzoj1339】[Baltic2008]Mafia 网络流最小割

    题目描述 匪徒准备从一个车站转移毒品到另一个车站,警方准备进行布控. 对于每个车站进行布控都需要一定的代价,现在警方希望使用最小的代价控制一些车站,使得去掉这些车站后,匪徒无法从原定的初始点到达目标点 ...

  4. Codeforces 898E Squares and not squares

    题目大意 给定 $n$($n$ 是偶数,$2\le n\le 2\times 10^{5}$)个非负整数 $a_1,\dots, a_n$($a_i\le 10^9$). 要求将其中 $n/2$ 个数 ...

  5. spring执行事务提交后进行一些逻辑操作

    在使用spring事务时,我们通常会把事务内的所有操作当成是一个原子操作.也就是当整个事务内的所有代码都执行完成后, 才会将所有的数据落实到数据库中.这样做有时也会给我们造成麻烦.比如以下场景: 根据 ...

  6. 【NOIP2017】逛公园(最短路图,拓扑排序,计数DP)

    题意: 策策同学特别喜欢逛公园. 公园可以看成一张 N 个点 M 条边构成的有向图,且没有自环和重边.其中 1 号点是公园的入口, N 号点是公园的出口,每条边有一个非负权值,代表策策经过这条边所要花 ...

  7. 【BZOJ1040】骑士(环套树,树形DP)

    题意:有一张N点N边的图,点有点权.相连的两个点不能同时取,问使点权和最大怎么取. 思路:如果是N点N-1边就是一棵树,即”没有上司的舞会“ 现在多了一条边,就是环套树的森林.我们枚举删哪条边,删后就 ...

  8. 【CF20C】Dijkstra?(DIJKSTRA+HEAP)

    没什么可以说的 做dijk+heap模板吧 以后考试时候看情况选择SFPA和DIJKSTRA ; ..]of longint; dis:..]of int64; a:..]of int64; b:.. ...

  9. 第一次用写一个3d轮播

    2016-07-11gallery  3d html <!doctype html><html lang="en"><head> <met ...

  10. ListView更新方法的优化

    ListView和Adapter对象均具备有对象更新方法 ListView对象列表的更新方法1.invalidate();--重绘组件2.invlidateView()--重绘组件并包含所有的View ...