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>'); / ...
随机推荐
- 移动端开发框架Zepto.js
一.概述 Zepto.js是一个轻量的js库,它与jQuery有类似的API. zepto的设计目的是不到10K的通用库,快速下载,有一个熟悉的api-->精力专注在开发上. 流行起来的原因:轻 ...
- Autowire(自动装配)机制
为什么Spring要支持Autowire(自动装配) 先写几个类,首先定义一个Animal接口表示动物: 1 public interface Animal { 2 3 public void eat ...
- hibernate离线条件查询设置or关系
detachedCriteria.add(Restrictions.or(Restrictions.isNull(""), Restrictions.isNull("&q ...
- java RSA验签
这几天在跟一个php的小哥哥联调接口,遇到了一些问题记录下来, 直接上代码吧,亲测有效 import org.slf4j.Logger; import org.slf4j.LoggerFactory; ...
- GitHub:如何构建一个股票市场知识图谱?(附代码&链接)
来源:专知 本文约 600007 董事⻓/董事 高燕 女 60 600007 执⾏董事 刘永政 男 50 600008 董事⻓/董事 ··· ··· ··· ··· ··· 注:建议表头最好用相应的英 ...
- mybatis和java一些知识记录
<where> <if test="userName != null and userName != ''"> and user_name like con ...
- Activiti 部分实用功能
helloworld中已经写了关于部署流程图,查询个人任务,完成个人任务部分.现在添加几个新的实用功能 1.判断流程是否完成,代码如下 public void isProcessEnd() { Str ...
- mysql的root用户被删除, MySQL 服务无法启动 1067错误
本文出现的问题有: 1, root(localhost) 用户被删除; 2, 在关闭mysql服务过后, 无法启动,出现1067错误; 我使用的mysql版本为5.6; mysql的安装路径: C:\ ...
- Odoo(OpenERP)配置文件详解
[options] ; addons模块的查找路径 addons_path = E:\GreenOdoo8.0\source\openerp\addons ; 管理员主控密码(用于创建.还原和备份数据 ...
- error LNK2005:"private:__thiscall编译错误
对于这种编译错误,网上给出了很多解决办法,大部分都是忽略特定库,或者改变多线程调试DLL,但是均没有效果. 这里记录下自己的解决方法,首先按照下图,取消从父级或项目默认设置继承,避免与其他库中的定义冲 ...