DOM增删改替换
var div = document.createElement("div");
//document.body.appendChild(div); for(var i=0;i<10;i++){
var span = document.creatElement("span");
div.appendChild(span);
}
document.body.appendChild(div);
//创建碎片容器:
var elem = document.createDocumentFragment();
for(var i =0;i<10;i++){
var div = document.creatElement("div");
}
document.body.appendChile(elem);
二、删除元素三部曲
var div = document.createElement("div");
var span = document.createElement("span");
span.addEventListener("click",clickHandler); div.appendChild(span);
document.body.appendChild(div);
function clickHandler(e){
span.textContent="欢迎";
}
//删除之前的将事件删除
span.removeEventListener("click",clickHandler);
//使用onclick事件的时候,删除方法删除事件
//span.onclick=null //删除元素
div.removeChild(span);
span=null; div.appendChild(span);
//此时的span不再是节点,是null,再添加的时候就会报错
父容器.removeChild(新元素,要替换掉的旧元素)
四、复制元素:
源元素.cloneNode(deep)
DOM增删改替换的更多相关文章
- DOM增删改
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- JavaScript HTML DOM增删改查
首先 js 可以修改HTML中的所有元素和属性,它还可以改变CSS样式,并且可以监听到所有事件并作出响应,这篇笔记呢 主要记录如何对HTML元素进行增删改查. 1 查找DOM 第一种方式是我们最常用的 ...
- linux sed 命令 实现对文件的增删改替换查 实验
1. 统一实验文本 # 创建包含下面内容的文件,后面的操作都会使用这个文件 [root@MongoDB ~]# cat person.txt ,mike,CEO ,jack,CTO ,yy,CFO , ...
- DOM增删改操作
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- 第 9 章 DOM 的增删改查
DOM 的增删改查 本文不会详细讲解,只是简单提及知识要点,详细可以参考<dom高级编程>. 1. document.write document.write('<h1>创建节 ...
- DOM节点的增删改查
在开始展开DOM操作前,首先需要构建一棵DOM树. <!DOCTYPE html> <html lang="en"> <head> <me ...
- HTML DOM节点的增删改查
上篇博客中,我们已经初步接触了DOM基础,可是我们学习是为了可以更好地应用,今天我们就来看看DOM节点的增删改查. 无论在哪里,我们想要操作一个东西,总是应该先去获得它.那么我们怎么获得呢? HTML ...
- JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件
JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删 ...
- 超详细的DOM操作(增删改查)
操作DOM的核心就是增删改查 原文地址:https://jianshu.com/p/b0aa846f4dcc 目录 一.节点创建型API 1.1 createElement 1.2 createTex ...
随机推荐
- mfc CString 转 char *
做界面时遇到需要从界面编辑框接受输入字符(用户名,密码之类),然后转为char *类型交给程序处理,记录一下找到的方法,主要参考https://blog.csdn.net/neverup_/artic ...
- GAN算法笔记
本篇文章为Goodfellow提出的GAN算法的开山之作"Generative Adversarial Nets"的学习笔记,若有错误,欢迎留言或私信指正. 1. Introduc ...
- Redis面试篇 -- Redis主从复制原理
Redis一般是用来支撑读高并发的,为了分担读压力,Redis支持主从复制.架构是主从架构,一主多从, 主负责写,并且将数据复制到其它的 slave 节点,从节点负责读. 所有的读请求全部走从 ...
- div模拟select/option解决兼容性问题及增加可拓展性
个人博客: http://mcchen.club 想到做这个模拟的原因是之前使用select>option标签的时候发现没有办法操控option的很多样式,比如line-height等,还会由此 ...
- 写mysql语句时tab键与空格键
某网页上复制的一份mysql语句,报错,重写一遍后,好了,对比后,发现, 可以看到在sublime text中,网上复制的缩进是空白的,tab键是横杠,空格键是一个点
- CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?
CSS 选择符有哪些? 1.id选择器(#id) 2.类选择器(.class) 3.标签选择器(div,h1,p) 4.相邻选择器(h1 + p) 5.子选择器(ul > li) 6.后代选择器 ...
- React 项目引入 Dva
背景 现在手上在做的 React 项目因为年代久远,用的 Redux,写代码的体验不太好,所以想升级一下引入 dva.以往使用 dva 都是使用 dva-cli 直接生成 dva 项目,或者在使用 a ...
- 网页布局——Flex弹性框布局
布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 需要安卓4.4及以上版本可以使用 ...
- python编程基础之二
交互式: 此处以windows为例:开始->运行->cmd,输入python 交互式界面 优点:即时,所见即所得 缺点:代码不可复用,根本无法进行维护 退出:exit() 代码是顺序执行: ...
- UDP方式的传输
UDP 部分内容需要查文档学习,我们需要了解下面的两个类:java.net.DatagramSocket和java.net.DatagramPacket java.net.DatagramSocket ...