JS DOM元素的操作(创建,添加,删除,和修改属性)
1.1 创建 DOM 元素以及相应的追加方式
1.1.1 创建:document.createElement('div'); 添加: fatherEle.appendChild(ele);

appendChild 是将一个元素追加到另一个元素的最后, 不会覆盖父元素原有的内容。
1.1.2 拼接元素的字符串,利用父元素的innerHTML设置父元素的内容
父元素中的html内容为html字符串,回复该父元素原有的内容。
这种方法直接清空父元素中所有的元素。
1.1.3 insertBefore

此外还有document.write,但是此方法会覆盖页面所有的内容。(不建议使用)

1.2 删除dom元素
1.2.1 删除父元素下某个子元素:document.getElementById('fatherBox').removeChild(pEle[0]);
,
此处可以直接使用子元素的parentNode 去删除该子元素 ,如

1.2.2 清空父元素下所有的内容, innerHTML = '';

1.3 修改dom元素的属性
1.3.1 attributes获取一个元素作为对象


1.3.2 getAttribute 和 setAttribute

1.3.3 createAttribute

JS DOM元素的操作(创建,添加,删除,和修改属性)的更多相关文章
- dir(dict)|字典的创建-添加-删除-修改-判断存在-取值等相关操作
dir(dict) ####字典操作:创建-添加-删除-修改-判断存在-取值 #(一)创建字典: {} .等号. zip(). [(),()] #1.创建空字典 dict0 = {} #2.等号创建 ...
- Ajax基础(四)--dom元素简单操作
1 //js对dom元素的操作 //添加dom元素 var param = document.createElement("p"); var node = document.cre ...
- hbase笔记---新版api之对表的操作,指定region创建,普通创建,删除,修改列族信息
hbase 对于表的相关操作: 实现功能有:指定region创建,普通创建,删除,修改列族信息 package learm.forclass.testclass; import org.apache. ...
- js节点的创建添加删除
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- JS中对DOM元素的操作
https://www.runoob.com/jquery/jquery-ref-html.html 1.each 遍历 //遍历所有class为checksingle的DOM元素 $(" ...
- Dom元素的操作
getElementById(): 获取有指定惟一ID属性值文档中的元素 getElementsByName(name): 返回的是数组 getElementsByTagName(): 返回具有指定标 ...
- 获取 js DOM元素中绑定的所有事件,模仿 chrome getEventListeners
偶尔看到了这个问题,如何用JS获取元素某一事件上绑定的所有Listener? 突然觉得好像是有解决办法的,查了下,在 chrome 下,支持 window.getEventListeners(obj) ...
- SQL语句处理一些修改、新增、删除、修改属性操作(MySql)
方法一: 直接(手动)去修改数据库名称,数据库表名称,数据库列名称.列属性 方法二: 使用SQL语句去修改 -- 修改表名 ALTER TABLE tableName RENAME newTableN ...
- JQ DOM元素 创建 添加 删除
创建元素 // 创建元素节点 $('<p></p>'); // 创建属性节点 $('<p class="wow"></p>'); / ...
随机推荐
- 漫漫人生路,我们该何去何从! Python让我找到了方向
互联网寒冬 2017年冬天,是我人生中最难熬的一个冬天,其实2017年的冬天并不算太冷,比这冬日的寒风还要严寒的要属这所谓的"互联网寒冬"吧!各大厂裁员的消息充斥着互联网,互联网表 ...
- Python中map和reduce函数??
①从参数方面来讲: map()函数: map()包含两个参数,第一个是参数是一个函数,第二个是序列(列表或元组).其中,函数(即map的第一个参数位置的函数)可以接收一个或多个参数. reduce() ...
- js中reduce()的牛掰所在 本质作用:实现数值累计,筛选过滤,类似递归
先看w3c官说 array.reduce(function(total, currentValue, currentIndex, arr), initialValue); /* total: ...
- MongoDB的使用学习之(二)简介
原文链接:http://www.cnblogs.com/yxlblogs/p/3681089.html MongoDB 是一个高性能,开源,无模式的文档型数据库,是当前 NoSQL 数据库产品中最热门 ...
- 从excel表中生成批量SQL
excel表格中有许多数据,需要将数据导入数据库中,又不能一个一个手工录入,可以生成SQL,来批量操作. ="insert into Log_loginUser (LogID, Logi ...
- DbArithmeticExpression arguments must have a numeric common type.
引用 system.data.linq
- Cocos2d-x视频教程
目录 1. 我的技术专栏 2. 相关推荐 3. 下载链接 4. cocos2d-xx Lua+JS+C++教学视频 5. 杨丰盛Cocos2D-X游戏课程 6. [Cocos2d-x]塔防游戏开发实战 ...
- Linux性能优化从入门到实战:13 内存篇:内存指标/工具总结、问题定位和调优
内存性能指标 系统内存指标 已用内存和剩余内存很容易理解,就是已经使用和还未使用的内存. 共享内存是通过 tmpfs 实现的,所以它的大小也就是 tmpfs 使用的内存大小.tmpfs 其实也是一种特 ...
- HDU 4678 Mine(博弈)
Mine Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) Total Submi ...
- VPS Linux修改root密码
hosteons VPS 没有提供在网页控制面板里修改root密码的选项,但是可以通过Rescue模式吃查看root密码以及 有重置root密码为随机值的选项. 在重置root密码为随机值后,进入系统 ...