添加或删除 HTML dom元素
添加或删除 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> 元素:
如需向 <p> 元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:
然后您必须向 <p> 元素追加这个文本节点:
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素:
以下代码在已存在的元素后添加新元素:
删除已有的 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元素的更多相关文章
- JS添加或删除HTML dom元素的方法实例分析
本文实例讲述了JS代码添加或删除HTML dom元素的方法.分享给大家供大家参考,具体如下: 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一 ...
- jQuery -> 删除/替换DOM元素
删除 删除操作很easy,直接在结果集后链式调用remove()方法就可以. 比如.要删除下面html脚本中全部的a元素.直接通过 $('a'.remove(); 就能够做到了. <h3> ...
- Javascript DOM 03 表格添加、删除 + 搜索
获取 tBodies.tHead.tFoot.rows.cells 隔行变色 鼠标移入高亮 添加.删除一行 DOM方法的使用 ...
- JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
- JS DOM元素的操作(创建,添加,删除,和修改属性)
1.1 创建 DOM 元素以及相应的追加方式 1.1.1 创建:document.createElement('div'); 添加: fatherEle.appendChild(ele); appe ...
- ztree : checkbox 选中/不选中时动态添加/删除DOM元素
先上代码. var IDMark_Switch = "_switch", IDMark_Icon = "_ico", IDMark_Span = "_ ...
- JQUERY添加、删除元素、eq()方法;
一.jQuery - 添加元素 1.append() - 在被选元素内部的结尾插入指定内容 2.prepend() - 在被选元素内部的开头插入指定内容 3.after() - 在被选元素之后插入内容 ...
- 添加和删除节点(HTML 元素)。
JavaScript HTML DOM 元素(节点) 添加和删除节点(HTML 元素). 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一 ...
- jQuery_添加与删除元素
一.jQuery添加元素(通过 jQuery,可以很容易地添加新元素/内容.) 1.添加新的 HTML 内容,用于添加新内容的四个 jQuery 方法(都能解析HTML标签): append() - ...
随机推荐
- 2018.08.02 洛谷P3355 骑士共存问题(最小割)
传送门 这题让我联想到一道叫做方格取数问题的题,如果想使摆的更多,就要使不能摆的更少,因此根据骑士的限制条件建图,求出至少有多少骑士不能摆,减一减就行了. 代码: #include<bits/s ...
- hdu-2191(完全背包+二进制优化模板)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2191 思路:完全背包模板 #include<iostream> #include<c ...
- s28 LNMP架构服务搭建
nginx-location使用 location语法 location使用的语法例子为: location [=|~|~*|^~] uri{ 对location语法列表说明. |1ocation | ...
- Python网络编程总结
----learn from luffycity---- 1. 什么是C/S架构? C指的是client(客户端软件),S指的是Server(服务端软件),C/S架构就是基于网络实现客户端与服务端通信 ...
- python网页爬虫 spiders_97A-04B
import urllib import urllib.request import bs4 from bs4 import BeautifulSoup as bs import re import ...
- C#-VS字符串、日期、时间和时间段
小知识 哈希表,内存中的对象,用速度很快的哈希表当字典表,记录主键和内容. @,遇到转义字符,不转义,直接输出,即就是.转义字符是反斜杠/ 全部的内置类型都用类和结构描述.值类型用结构,引用类型用类. ...
- springmvc elf8848
刚开始觉得孔浩讲得好,之后觉得开涛讲得好,现在觉得elf8848讲得好.其实只是自己学习的各个阶段 孔浩:环境搭建,做了个基础的CRUD 开涛:讲了Controller(不该看),注解,数据绑定,请求 ...
- ABP 基础设施层——集成 NHibernate
本文翻译自ABP的官方教程<NHibernate Integration>,地址为:http://aspnetboilerplate.com/Pages/Documents/NHibern ...
- Grafana展示DNS解析延时
首先一个完整的监控肯定会包含三个部分:1.数据收集部分.2.数据存储部分.3.数据展示部分,今天我也是从这三个方面来实现这个监控的. 数据收集(SHELL 脚本) 没有想到比较好的方法来采集数 ...
- ASP.NET WEB API 返回JSON 出现2个双引号问题
前言 在使用ASP.NET WEB API时,我想在某个方法返回JSON格式的数据,于是首先想到的就是手动构建JSON字符串,如:"{\"result\" ...