DOM节点创建(jQuery)
1DOM创建节点及节点属性
通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作。但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了。
试想下这样的情况:如果我们通过AJAX获取到数据之后然后才能确定结构的话,这种情况就需要动态的处理节点了
本文向大家介绍一下如何使用JavaScript创建div节点元素,主要包括创建div节点元素的属性和创建div节点元素的样式两大部分内容,相信本文介绍一定会让你有所收获。
先介绍下需要用到的浏览器提供的一些原生的方法(这里不处理低版本的IE兼容问题)
创建流程比较简单,大体如下:
- 创建节点(常见的:元素、属性和文本)
- 添加节点的一些属性
- 加入到文档中
流程中涉及的一点方法:
- 创建元素:document.createElement
- 设置属性:setAttribute
- 添加文本:innerHTML
- 加入文档:appendChild
如右边代码所示,写一个最简单的元素创建,我们会发现几个问题:
- 每一个元素节点都必须单独创建
- 节点是属性需要单独设置,而且设置的接口不是很统一
- 添加到指定的元素位置不灵活
- 最后还有一个最重要的:浏览器兼容问题处理
针对这一系列的DOM操作的问题,jQuery给出了一套非常完美的接口方法,我们之后就开始深入学习
2jQuery节点创建与属性的处理
上一节介绍了通过JavaScript原生接口创建节点,在处理上是非常复杂与繁琐的。我们可以通过使用jQuery来简化了这个过程
创建元素节点:
可以有几种方式,后面会慢慢接触。常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来,通过$()函数处理,$("html结构")
$("<div></div>")
创建为本节点:
与创建元素节点类似,可以直接把文本内容一并描述
$("<div>我是文本节点</div>")
创建为属性节点:
与创建元素节点同样的方式
$("<div id='test' class='aaron'>我是文本节点</div>")
我们通过jQuery把上一届的代码改造一下,如右边代码所示
一条一句就搞定了,跟写HTML结构方式是一样的
$("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
这就是jQuery创建节点的方式,让我们保留HTML的结构书写方式,非常的简单、方便和灵活
转载于:https://www.cnblogs.com/jiajia-16/p/6158279.html
DOM节点创建(jQuery)相关推荐
- 【JavaScript】DOM节点-创建、插入、删除、替换、克隆节点
文章目录 DOM节点 创建节点 1. 创建元素节点 2. 创建文本节点 插入节点 1. appendChild() 2. insertBefore() 删除节点 1. removeChilde() 2 ...
- DOM节点的获取及创建
DOM节点的获取 通过id获取节点·[返回具体某个节点] document.getElementById(ID名) 通过标签名获取节点[返回节点数组,即使只有一个] document.getEleme ...
- 04-老马jQuery教程-DOM节点操作及位置和大小
1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...
- JavaScript-操作DOM对象-创建和插入dom节点
插入节点 我们获得了某个Dom节点,假设这个dom节点是空的,我们通过innerHTML就可以增加一个元素了,但是这个DOM节点已经存在元素了,我们就不能这么干了!会产生覆盖 将标签 追加 到其他标签 ...
- jQuery DOM 节点操作
DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的"M".页面中的元 素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建. 插入.替换. ...
- 原生js由html创建节点,[js高手之路]HTML标签解释成DOM节点的实现方法
最近在封装一个开源框架,已经写了500行, 已经具备jquery的大多数常用功能,后面还会扩展大量的工具函数和MVVM双向驱动等功能.跟jquery的使用方法完全一样,jquery的选择器,几乎都能支 ...
- jQuery DOM节点操作
开发工具与关键技术:Adobe Dreamweaver JavaScript 作者:执~漠 撰写时间:2020年4月22日 在 HTML DOM 中,所有事物都是节点. jQuery创建节点 jQue ...
- jQuery添加DOM节点常用的5种方法
一.内部插入(前插入.后插入): <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
- 前端框架——Jquery——基础篇2__获取DOM节点的值
对于获取DOM节点的内容,Jquery提供了四种方法,html,text,val,attr.下面来分别介绍这四种方法和它们的区别.下面以例子来说明 我写的JSP页面内容如下: 1 <div id ...
最新文章
- python-模块的嵌套调用-随堂草稿件
- Linux终端显示工作路径
- ajax dorado,02. Dorado的AJAX异常
- 使用NATAPP内网穿透
- 中文讲解 机器学习 Machine Learning in Business 第二版,约翰.赫尔(John C. Hull ),Chenghsi Hsieh老师
- php龙之战争游戏搭建教程,龙之战争1.02正式版下载
- 抖音数据统计_抖音直播带货数据分析(最新教程)
- 永利宝与火理财涉嫌非法吸收公众存款 6名犯罪嫌疑人抓捕
- SQLServer中定义拼音检索函数,根据中文参数返回对应汉字的拼音首字母
- http与htpps的区别
- 软考报名资格审核要多久?证明材料要哪些?
- 分形蕨( fractal fern)
- 这几个动图告诉你科学的神奇,看完瞬间觉得智商都提高了
- node启动之后内存占用过高解决方案
- 三分钟看完京东区块链白皮书
- 从零开始的Java笔记01
- BASE64加密解密---前端 AES 加密解密
- webRTC入门示例demo
- 有感于2004雅典奥运会
- Python 中文编码介绍
热门文章
- java中or和and的优先级_x86处理器汇编语言AND和OR运算符优先级
- 雷鸟html签名设置,thunderbird 使用OpenPGP加解密邮件
- java 设置pdf 编码格式_Java如何设置PDF文档背景色详解
- weka的java环境配置_windows下安装和配置Weka
- 如果用户的计算机在查询本地Net,网络操作系统管理2448-2
- 网络摄像头sdk_SenseDLC嵌入式人像识别SDK 安防边缘的“小巨人”
- discuz修改用户uid_你知道Linux中的UID和GID的含义吗
- html ajax 数据传送,HTML AJAX 简单数据JS
- html自动滑动轮播代码,html+css+js 实现自动滑动轮播图
- 英国文化影响管理风格_文化如何影响用户体验