创建新的 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 创建元素 删除元素(结点)的更多相关文章

  1. jQuery 源码分析(二十一) DOM操作模块 删除元素 详解

    本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个: e ...

  2. DOM创建和删除节点、HTML DOM常用对象[转]

    创建和删除节点:——核心DOM   1. 创建单个元素节点:3步:      1. 创建空元素节点对象:         var elem=document.createElement("标 ...

  3. D3.js 插入元素,删除元素

    插入元素涉及的函数有两个: 一.append():在选择集末尾插入元素 假设有三个段落元素 <p>Apple</p> <p>Pear</p> <p ...

  4. DOM创建和删除节点

    一.创建节点 3步 1.创建空元素对象: var newElem=document.createElement("标签名"); 例如:var a=document.createEl ...

  5. 创建删除元素appendChild,removeChild,createElement,insertBefore

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  6. jQuery的DOM操作之加入元素和删除元素

    加入元素: .append()--在目标元素之后加入元素. .prepend()--在目标元素之前加入元素. .after()--在目标元素之后换行加入元素: .before()--在目标元素之前加入 ...

  7. 抛弃jQuery:DOM API之操作元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...

  8. D3.js的v5版本入门教程(第五章)—— 选择、插入、删除元素

    D3.js的v5版本入门教程(第五章) 1.选择元素 现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下 假设我们的<body>中有 ...

  9. JQ DOM元素 创建 添加 删除

    创建元素 // 创建元素节点 $('<p></p>'); // 创建属性节点 $('<p class="wow"></p>'); / ...

随机推荐

  1. python3-常用模块之time

    import time time模块主要是处理各种类型的时间 常用方法 1.time.sleep(secs) (线程)推迟指定的时间运行,单位为秒. 2.time.time() 获取当前时间戳 时间戳 ...

  2. sql server2008安装时提示重启计算机失败怎么办

    安装SQL Server 2008时,经常会遇到这样一个问题,软件提示“重启计算机失败”,如果忽略的话,会给后面的安装带来很大的麻烦,这里如何解决呢?   工具/原料 注册表 解决方法   在键盘上按 ...

  3. ubuntu 安装samba共享文件夹

    安装samba sudo apt-get install samba smbclient 配置samba sudo cp /etc/samba/smb.conf /etc/samba/smb.conf ...

  4. c语言学习笔记 函数数组传递笔记

    今天学习c语言的一个小例子,果然还是陷入了php的编程习惯里,这里记录一下. #include <stdio.h> //例子很简单,就是编写一个函数把传递进来的数组里的值都赋值为1而已 / ...

  5. mysql高级教程(二)-----性能分析

    MySQL常见瓶颈 1.cpu SQL中对大量数据进行比较.关联.排序.分组 2.IO a.实例内存满足不了缓存数据或排序等需要,导致产生大量物理 IO. b.查询执行效率低,扫描过多数据行. 3.锁 ...

  6. vim用户设置

    此配置目前使用户mac,linux,win,但是win系统需要提前配置mingw32相关的gcc系统路径等信息. " Setting some decent VIM settings for ...

  7. PAT甲级——A1052 Linked List Sorting

    A linked list consists of a series of structures, which are not necessarily adjacent in memory. We a ...

  8. 切换默认jdk版本执行

    Java代码 # cd /usr/bin # ln -s -f /usr/java/jdk1.6.0_24/jre/bin/java # ln -s -f /usr/java/jdk1.6.0_24/ ...

  9. StopWatch 监控Java代码运行时间和分析性能

    背景 有时我们在做开发的时候需要记录每个任务执行时间,或者记录一段代码执行时间,最简单的方法就是打印当前时间与执行完时间的差值,然后这样如果执行大量测试的话就很麻烦,并且不直观,如果想对执行的时间做进 ...

  10. npm config set registry 与 cnpm的区别

    一直以为这2个事没有区别的: npm config set registry http://registry.npm.taobao.org 后使用npm命令. npm install -g cnpm ...