HTML DOM元素
HTML DOM元素
1.创建新的HTML元素
向HTML DOM添加新元素,必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>添加新元素</title> </head> <body> <div id="domediv"> <p id="test1">第一条语句</p> <p id="test2">第二条语句</p> </div> <button type="button" onclick="test()">添加新文本</button> <script> function test(){ var a = document.createElement("p"); //创建一个新的元素 var b = document.createTextNode("这是一个新的段落"); //创建一个新的文本 a.appendChild(b); //吧新文本加入新元素中 var element = document.getElementById("domediv"); //创建新元素 element.appendChild(a); //把字p元素放到div元素中 } </script> </body> </html>
2.删除原有的HTML元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>添加新元素和删除已有元素</title> </head> <body> <div id="demodiv"> <p id="1">段落1</p> <p id="2">段落2</p> </div> <button type="button" onclick="test()">删除已有元素</button> <script> function test(){ var a = document.getElementById("demodiv"); //获取父节点 var b = document.getElementById("2"); //获取子节点 a.removeChild(b); //删除父节点中的子节点 } </script> </body> </html>
HTML DOM元素的更多相关文章
- jQuery操作DOM元素
作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...
- JQuery利用sort对DOM元素进行排序
前言 排序对于我们是再熟悉不过了,在绝大数应用程序中都会有这样一个场景:当我们从服务器端获取一个列表时,在界面上进行渲染,我们可以会依赖于某一个规则来进行排序,当然此时绝大多数会再次与服务器进行交互来 ...
- html标签属性(attribute)和dom元素的属性(property)
简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
- 如何隐藏DOM元素
在CSS中,要隐藏DOM元素常见的方法有: 设置元素的opacity值为0 设置元素的visibility值为hidden 设置元素的display值为none 设置元素的position值为abso ...
- HTML DOM元素的Dragdrop
在前端web页面中,为了提高用户体验,通常会希望将页面中的元素设计成可dragdop的,简化用户操作.这一设计特性在缺少鼠标的触摸屏设备上,显得更为重要. 在早期的应用中,我们通常需要借助第三方的ja ...
- DOM元素querySelectorAll可能让你意外的特性表现
一.时间紧急,废话少说 本文所在的页面藏匿了下面这些代码: <img id="outside"> <div id="my-id"> &l ...
- 使用dom元素和jquery元素实现简单增删改的练习
软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquer ...
- 返本求源——DOM元素的特性与属性
抛砖引玉 很多前端类库(比如dojo与JQuery)在涉及dom操作时都会见到两个模块:attr.prop.某天代码复查时,见到一段为某节点设置文本的代码: attr.set(node, 'inner ...
- 【面试必备】javascript操作DOM元素
前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...
随机推荐
- struts局部、全局类型转换器
第01步:编写bean package com.self.bean; import java.util.Date; public class User { private Date birthday ...
- WindowsService 安装后报错: 无法启动计算机“.”上的服务 解决方案
问题 : 根据客户的需求做了一个小程序,需要有对WindowsService 安装,卸载,启动,停止的操作. 编译好之后在我的工程内直接Run 没问题.直接在\bin\Debug 点小程序运行,任何操 ...
- 手机端 zepto tap事件穿透
什么是事件穿透? 点击上面的一层时会触发下面一层的事件 ”google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,所以会导致 ...
- EBS 密码相关
SELECT usr.user_name, apps.cux_fnd_web_sec.decrypt ((SELECT (SELECT apps.cux_fnd_web_sec.decrypt (fn ...
- yii2购物车实现
1.商品列表中点击加入购物车,则跳转到购物车列表,效果如图所示: 视图代码goods/list.php中.代码如下: <?php echo Html::a('加入购物车',['cart','id ...
- webform 文件上传(头像上传) 隐藏FileUpload
<div> <%-- 核心思想:把FileUpload设为relative,top:-200px;opacity: --%> <div id="localIma ...
- Writable、WritableComparable和comparators
hadoop的序列化格式 hadoop自身的序列化存储格式就是实现了Writable接口的类,他只实现了前面两点,压缩和快速.但是不容易扩展,也不跨语言. 我们先来看下Writable接口,Writa ...
- 在ASP.NET非MVC环境中(WebForm中)构造MVC的URL参数
目前项目中有个需求,需要在WebForm中去构造MVC的URL信息,这里写了一个帮助类可以在ASP.NET非MVC环境中(WebForm中)构造MVC的URL信息,主要就是借助当前Http上下文去构造 ...
- ipseccmd命令解析
IPSec 首先需要指出的是,IPSec和TCP/IP筛选是不同的东西,大家不要混淆了.TCP/IP筛选的功能十分有限,远不如IPSec灵活和强大.下面就说说如何在命令行下控制IPSec. XP系统用 ...
- DataSnap 的连接事件顺序图
无意看到这两幅图,虽然已经了解,还是转一份保留以备后用