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>'); / ...
随机推荐
- vue-cli 本地环境 API 代理设置和解决跨域
前言 我们在使用 vue-cli 启动项目的时候npm run dev便可以启动我们的项目了,通常我们的请求地址是以 localhost: 来请求接口数据的,localhost 是没有办法设置 coo ...
- HDU 1069 Monkey and Banana (动态规划)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1069 简单记录一下 思路:把长方体的各种摆法都存到数组里面,然后按照长宽排序,再dp即可 转移方程 d ...
- window查看端口信息
netstat -nao |findstr "2129" 列出所有端口的情况 tasklist|findstr "pid" 查看对应进程信息
- 《DSP using MATLAB》Problem 7.35
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...
- java面向对象特征 — 一句话概括
java基础学习总结之基本特征,最开始学习的时候,是形而上的理解,用了3年多,再回头看,理解起来颇为顺理成章 语言学习大概就是这样一种规律,学习,不甚解,应用,应用,渐深入人心,回头一看,恍然一悟 最 ...
- java主函数参数传递args
a.javaJava应用程序的主入口方法main(String[] args),表示该方法需要接收一个字符串数组类型的参数, 如果该参数不指定,agrs接收的是null. 程序: public C ...
- PKU--1267 Cash Machine(多重背包)
题目http://poj.org/problem?id=1276 分析 这是一个多重背包的问题,可以把请求的金额当作背包的重量,而货币的面值就是价值又是重量. 于是这个问题便很好理解背包了. #];; ...
- 新启vue_cli项目+引入Element
[1]安装vue_cli vue init webpack 项目名字 [2]安装Element-UI cnpm install element-ui -S //写入dependencies cnpm ...
- 怎么解决VirtualBox无法安装增强工具
点击「设备」-「安装增强功能」,然后就弹出下面这个东西,百度和 bing 了很久,终于解决啦~ Unable to insert the virtual optical disk D:\Program ...
- vue elment.style样式修改(第三方组件自生成元素)
参考:https://blog.csdn.net/dcxia89/article/details/80402490 https://blog.csdn.net/jianglibo102 ...