添加或删除 HTML dom元素

创建新的 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 元素

<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>

如果能够在不引用父元素的情况下删除某个元素,就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。

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

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

添加或删除 HTML dom元素的更多相关文章

  1. JS添加或删除HTML dom元素的方法实例分析

    本文实例讲述了JS代码添加或删除HTML dom元素的方法.分享给大家供大家参考,具体如下: 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一 ...

  2. jQuery -&gt; 删除/替换DOM元素

    删除 删除操作很easy,直接在结果集后链式调用remove()方法就可以. 比如.要删除下面html脚本中全部的a元素.直接通过 $('a'.remove(); 就能够做到了. <h3> ...

  3. Javascript DOM 03 表格添加、删除 + 搜索

    获取 tBodies.tHead.tFoot.rows.cells   隔行变色 鼠标移入高亮   添加.删除一行 DOM方法的使用                                   ...

  4. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  5. JS DOM元素的操作(创建,添加,删除,和修改属性)

    1.1 创建 DOM 元素以及相应的追加方式 1.1.1  创建:document.createElement('div'); 添加: fatherEle.appendChild(ele); appe ...

  6. ztree : checkbox 选中/不选中时动态添加/删除DOM元素

    先上代码. var IDMark_Switch = "_switch", IDMark_Icon = "_ico", IDMark_Span = "_ ...

  7. JQUERY添加、删除元素、eq()方法;

    一.jQuery - 添加元素 1.append() - 在被选元素内部的结尾插入指定内容 2.prepend() - 在被选元素内部的开头插入指定内容 3.after() - 在被选元素之后插入内容 ...

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

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

  9. jQuery_添加与删除元素

    一.jQuery添加元素(通过 jQuery,可以很容易地添加新元素/内容.) 1.添加新的 HTML 内容,用于添加新内容的四个 jQuery 方法(都能解析HTML标签): append() - ...

随机推荐

  1. 2018.08.02 洛谷P3355 骑士共存问题(最小割)

    传送门 这题让我联想到一道叫做方格取数问题的题,如果想使摆的更多,就要使不能摆的更少,因此根据骑士的限制条件建图,求出至少有多少骑士不能摆,减一减就行了. 代码: #include<bits/s ...

  2. hdu-2191(完全背包+二进制优化模板)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2191 思路:完全背包模板 #include<iostream> #include<c ...

  3. s28 LNMP架构服务搭建

    nginx-location使用 location语法 location使用的语法例子为: location [=|~|~*|^~] uri{ 对location语法列表说明. |1ocation | ...

  4. Python网络编程总结

    ----learn from luffycity---- 1. 什么是C/S架构? C指的是client(客户端软件),S指的是Server(服务端软件),C/S架构就是基于网络实现客户端与服务端通信 ...

  5. python网页爬虫 spiders_97A-04B

    import urllib import urllib.request import bs4 from bs4 import BeautifulSoup as bs import re import ...

  6. C#-VS字符串、日期、时间和时间段

    小知识 哈希表,内存中的对象,用速度很快的哈希表当字典表,记录主键和内容. @,遇到转义字符,不转义,直接输出,即就是.转义字符是反斜杠/ 全部的内置类型都用类和结构描述.值类型用结构,引用类型用类. ...

  7. springmvc elf8848

    刚开始觉得孔浩讲得好,之后觉得开涛讲得好,现在觉得elf8848讲得好.其实只是自己学习的各个阶段 孔浩:环境搭建,做了个基础的CRUD 开涛:讲了Controller(不该看),注解,数据绑定,请求 ...

  8. ABP 基础设施层——集成 NHibernate

    本文翻译自ABP的官方教程<NHibernate Integration>,地址为:http://aspnetboilerplate.com/Pages/Documents/NHibern ...

  9. Grafana展示DNS解析延时

      首先一个完整的监控肯定会包含三个部分:1.数据收集部分.2.数据存储部分.3.数据展示部分,今天我也是从这三个方面来实现这个监控的. 数据收集(SHELL 脚本)   没有想到比较好的方法来采集数 ...

  10. ASP.NET WEB API 返回JSON 出现2个双引号问题

    前言          在使用ASP.NET WEB API时,我想在某个方法返回JSON格式的数据,于是首先想到的就是手动构建JSON字符串,如:"{\"result\" ...