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元素的操作(创建,添加,删除,和修改属性)的更多相关文章

  1. dir(dict)|字典的创建-添加-删除-修改-判断存在-取值等相关操作

    dir(dict) ####字典操作:创建-添加-删除-修改-判断存在-取值 #(一)创建字典: {} .等号. zip(). [(),()] #1.创建空字典 dict0 = {} #2.等号创建 ...

  2. Ajax基础(四)--dom元素简单操作

    1 //js对dom元素的操作 //添加dom元素 var param = document.createElement("p"); var node = document.cre ...

  3. hbase笔记---新版api之对表的操作,指定region创建,普通创建,删除,修改列族信息

    hbase 对于表的相关操作: 实现功能有:指定region创建,普通创建,删除,修改列族信息 package learm.forclass.testclass; import org.apache. ...

  4. js节点的创建添加删除

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. JS中对DOM元素的操作

    https://www.runoob.com/jquery/jquery-ref-html.html 1.each  遍历 //遍历所有class为checksingle的DOM元素 $(" ...

  6. Dom元素的操作

    getElementById(): 获取有指定惟一ID属性值文档中的元素 getElementsByName(name): 返回的是数组 getElementsByTagName(): 返回具有指定标 ...

  7. 获取 js DOM元素中绑定的所有事件,模仿 chrome getEventListeners

    偶尔看到了这个问题,如何用JS获取元素某一事件上绑定的所有Listener? 突然觉得好像是有解决办法的,查了下,在 chrome 下,支持 window.getEventListeners(obj) ...

  8. SQL语句处理一些修改、新增、删除、修改属性操作(MySql)

    方法一: 直接(手动)去修改数据库名称,数据库表名称,数据库列名称.列属性 方法二: 使用SQL语句去修改 -- 修改表名 ALTER TABLE tableName RENAME newTableN ...

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

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

随机推荐

  1. 使用userAgent区分浏览器版本

    使用userAgent区分浏览器版本:https://blog.csdn.net/n447194252/article/details/76255489 JS根据userAgent值来判断浏览器的类型 ...

  2. python 导入json模块的用法

    json用于字符串,和 python数据类型间进行转换,json模块有四个功能,dumps,dump,loads,load. json 用法 json.dumps 将数据通过特殊的形式转换为所有程序语 ...

  3. MS COCO 数据集学习笔记(Common Objects in COntext)

    一.数据来源 COCO中图片资源均引用自Flickr图片网站 二.数据集创建目的 进行图像识别训练,主要针对以下三个方向: (1)object instances (2)object keypoint ...

  4. CSS3实现小于1px的边框(移动端)

    <!doctype html> <html lang="en"> <head> <meta content="width=dev ...

  5. C# 委托 线程 窗体假死

    转载:http://www.cnblogs.com/smartls/archive/2011/04/08/2008981.html 异步调用是CLR为开发者提供的一种重要的编程手段,它也是构建高性能. ...

  6. PHP Web Server 实例

    通过WebService,我们可以调用部署在其它地方的程序,而不用关心被调用的程序是在什么平台用什么语言编写的.这里我们使用php调用. 在php4时代调用WebService大部分使用的nusoap ...

  7. http请求报文格式(请求行、请求头、空行 和 请求包体)和响应报文格式(状态行、响应头部、空行 和 响应包体)

    转载 出处 超文本传输协议(Hypertext Transfer Protocol,简称HTTP)是应用层协议.HTTP 是一种请求/响应式的协议,即一个客户端与服务器建立连接后,向服务器发送一个请求 ...

  8. Spark MLlib机器学习(一)——决策树

    决策树模型,适用于分类.回归. 简单地理解决策树呢,就是通过不断地设置新的条件标准对当前的数据进行划分,最后以实现把原始的杂乱的所有数据分类. 就像下面这个图,如果输入是一大堆追求一个妹子的汉子,妹子 ...

  9. python函数传参和返回值注意事项

    函数传参 空参数 定义函数时括号里面没有形参,调用时不用传参. def func(): print('null para.') # 调用 func() 位置传参 规定形参的数量,调用时必须传递相同数量 ...

  10. linux系统安装telnet服务

    linux安装telnet 安装前准备工作 1.安装telnet服务需要三个软件包:telnet.telnet-server和xinetd包. telnet,telnet-sever,xinetd软件 ...