DOM 创建元素 删除元素(结点)
创建新的 HTML 元素
如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。
<script>
var para=document.createElement("p"); //创建元素结点
var node=document.createTextNode("This is new."); //创建文本结点
para.appendChild(node); //插入结点 var element=document.getElementById("div1");
element.appendChild(para);
</script>
删除已有的 HTML 元素
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child); //通过父节点删除子节点 removeChild
</script>
如果能够在不引用父元素的情况下删除某个元素,就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素
//常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素:
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
DOM 创建元素 删除元素(结点)的更多相关文章
- jQuery 源码分析(二十一) DOM操作模块 删除元素 详解
本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个: e ...
- DOM创建和删除节点、HTML DOM常用对象[转]
创建和删除节点:——核心DOM 1. 创建单个元素节点:3步: 1. 创建空元素节点对象: var elem=document.createElement("标 ...
- D3.js 插入元素,删除元素
插入元素涉及的函数有两个: 一.append():在选择集末尾插入元素 假设有三个段落元素 <p>Apple</p> <p>Pear</p> <p ...
- DOM创建和删除节点
一.创建节点 3步 1.创建空元素对象: var newElem=document.createElement("标签名"); 例如:var a=document.createEl ...
- 创建删除元素appendChild,removeChild,createElement,insertBefore
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- jQuery的DOM操作之加入元素和删除元素
加入元素: .append()--在目标元素之后加入元素. .prepend()--在目标元素之前加入元素. .after()--在目标元素之后换行加入元素: .before()--在目标元素之前加入 ...
- 抛弃jQuery:DOM API之操作元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...
- D3.js的v5版本入门教程(第五章)—— 选择、插入、删除元素
D3.js的v5版本入门教程(第五章) 1.选择元素 现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下 假设我们的<body>中有 ...
- JQ DOM元素 创建 添加 删除
创建元素 // 创建元素节点 $('<p></p>'); // 创建属性节点 $('<p class="wow"></p>'); / ...
随机推荐
- [原创]Java调用PageOffice在线打开数据库中保存的Word文件
PageOffice产品和数据库是两个独立的概念,严格来说两者之间没有任何本质关系.PageOffice不依赖数据库而存在,但是数据库和PageOffice可以结合使用来完成某些复杂的业务逻辑.例如: ...
- [原创]关于时间格式的坑(kk:mm:ss、HH:mm:ss与hh:mm:ss)
笔者在项目中使用 kk:mm:ss表示24小时制,却发现与所想的不同,特记此坑,提醒众人: kk:mm:ss 24小时制,时间为1:00:00-24:59:59 HH:mm:ss 24小时制,时间 ...
- 08_springmvc数据回显和@ModelAttribute注解详解
一.数据回显 提交后,如果出现错误,将刚才提交的数据回显到刚才的提交页面. 二.pojo数据回显方法 1.springmvc默认对pojo数据进行回显. pojo数据传入controller方法后,s ...
- 06_springmvc之参数绑定(pojo和集合)
一.包装类型pojo参数绑定 实现方法: 第一种方法:在形参中 添加HttpServletRequest request参数,通过request接收查询条件参数. 第二种方法:在形参中让包装类型的po ...
- 从0开始学习ssh之basedao
用于所有dao里边会有许多相同的方法,例如save,update等等.应此设计一个basedao,所有dao都继承它.这样可以省去许多工作量. basedao如下 package cn.itcast. ...
- RTNETLINK answers: File exists错误解决方法
>一.写在前面: 因为是我刚学习linux好多问题需要解决,bolg仅作为记录自己的在技术这条道路上的点点滴滴. 二.事件起因: 最近因为女友的原因消沉的好长时间,在马哥那里的课程的结束到现在已 ...
- Django项目:CMDB(服务器硬件资产自动采集系统)--09--06CMDB测试Linux系统采集硬件数据的命令04
root 123456 ip addr init 0 root 123456 ip addr root 123456 python3 yum -y install zlib-devel bzip2-d ...
- Django项目:CRM(客户关系管理系统)--63--53PerfectCRM实现CRM客户报名流程缴费
#urls.py """PerfectCRM URL Configuration The `urlpatterns` list routes URLs to views. ...
- 3926: [Zjoi2015]诸神眷顾的幻想乡
传送门 一个广义后缀自动机模板. //Achen #include<algorithm> #include<iostream> #include<cstring> ...
- 深入浅出 Java Concurrency (6): 锁机制 part 1[转]
前面的章节主要谈谈原子操作,至于与原子操作一些相关的问题或者说陷阱就放到最后的总结篇来整体说明.从这一章开始花少量的篇幅谈谈锁机制. 上一个章节中谈到了锁机制,并且针对于原子操作谈了一些相关的概念和设 ...