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>'); / ...
随机推荐
- 转:Wireshark基本介绍和学习TCP三次握手
源地址:http://www.cnblogs.com/TankXiao/archive/2012/10/10/2711777.html 之前写过一篇博客:用 Fiddler 来调试HTTP,HTTPS ...
- Spring MVC(十三)--保存并获取属性参数
这里的属性参数主要是指通过request.session.cookie等设置的属性,有时候我们需要将一些请求的参数保存到HTTP的request或者session对象中去,在控制器中也会进行设置和获取 ...
- WPF MVVM模式不用Prism
上一个例子使用了Prism.这个例子不用Prism.用自己封装的库LiuxhCSDLL,其实也差不多. 一.程序结构 二.界面代码以及界面效果 <Window x:Class="WPF ...
- js 引入Vue.js实现vue效果
拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...
- LeetCode404Sum of Left Leaves左叶子之和
计算给定二叉树的所有左叶子之和. 示例: 3 / \ 9 20 / \ 15 7 在这个二叉树中,有两个左叶子,分别是 9 和 15,所以返回 24 class Solution { pub ...
- 03.Hibernate配置文件之核心配置文件
一.核心配置文件的两种配置方式 1.属性文件方式 hibernate.properties(基本不会选用 hibernate.connection.driver_class=com.mysql.jdb ...
- 微信小程序——tab导航栏
wxml: <view class="tab"> <view class="tab-left" bindtap="tabFun&q ...
- 深入浅出 Java Concurrency (12): 锁机制 part 7 信号量(Semaphore)[转]
Semaphore 是一个计数信号量.从概念上讲,信号量维护了一个许可集.如有必要,在许可可用前会阻塞每一个 acquire(),然后再获取该许可.每个 release() 添加一个许可,从而可能释放 ...
- SQLServer:目录
ylbtech-SQLServer:目录 1.返回顶部 2. 文档返回顶部 · https://docs.microsoft.com/zh-cn/sql/sql-server/sql-server ...
- Java虚拟机系列(二)---HotSpot虚拟机对象
都知道Java是一门面向对象的编程语言,在Java程序运行过程中,无时无刻不在创建对象,所以这节来总结一下HotSpot虚拟机中的Java对象. 一.Java虚拟机对象的创建过程. 在语义层面创建一个 ...