1DOM创建节点及节点属性

通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作。但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了。

试想下这样的情况:如果我们通过AJAX获取到数据之后然后才能确定结构的话,这种情况就需要动态的处理节点了

本文向大家介绍一下如何使用JavaScript创建div节点元素,主要包括创建div节点元素的属性和创建div节点元素的样式两大部分内容,相信本文介绍一定会让你有所收获。

先介绍下需要用到的浏览器提供的一些原生的方法(这里不处理低版本的IE兼容问题)

创建流程比较简单,大体如下:

  1. 创建节点(常见的:元素、属性和文本)
  2. 添加节点的一些属性
  3. 加入到文档中

流程中涉及的一点方法:

  • 创建元素:document.createElement
  • 设置属性:setAttribute
  • 添加文本:innerHTML
  • 加入文档:appendChild

如右边代码所示,写一个最简单的元素创建,我们会发现几个问题:

  1. 每一个元素节点都必须单独创建
  2. 节点是属性需要单独设置,而且设置的接口不是很统一
  3. 添加到指定的元素位置不灵活
  4. 最后还有一个最重要的:浏览器兼容问题处理

针对这一系列的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)相关推荐

  1. 【JavaScript】DOM节点-创建、插入、删除、替换、克隆节点

    文章目录 DOM节点 创建节点 1. 创建元素节点 2. 创建文本节点 插入节点 1. appendChild() 2. insertBefore() 删除节点 1. removeChilde() 2 ...

  2. DOM节点的获取及创建

    DOM节点的获取 通过id获取节点·[返回具体某个节点] document.getElementById(ID名) 通过标签名获取节点[返回节点数组,即使只有一个] document.getEleme ...

  3. 04-老马jQuery教程-DOM节点操作及位置和大小

    1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...

  4. JavaScript-操作DOM对象-创建和插入dom节点

    插入节点 我们获得了某个Dom节点,假设这个dom节点是空的,我们通过innerHTML就可以增加一个元素了,但是这个DOM节点已经存在元素了,我们就不能这么干了!会产生覆盖 将标签 追加 到其他标签 ...

  5. jQuery DOM 节点操作

    DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的"M".页面中的元 素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建. 插入.替换. ...

  6. 原生js由html创建节点,[js高手之路]HTML标签解释成DOM节点的实现方法

    最近在封装一个开源框架,已经写了500行, 已经具备jquery的大多数常用功能,后面还会扩展大量的工具函数和MVVM双向驱动等功能.跟jquery的使用方法完全一样,jquery的选择器,几乎都能支 ...

  7. jQuery DOM节点操作

    开发工具与关键技术:Adobe Dreamweaver JavaScript 作者:执~漠 撰写时间:2020年4月22日 在 HTML DOM 中,所有事物都是节点. jQuery创建节点 jQue ...

  8. jQuery添加DOM节点常用的5种方法

    一.内部插入(前插入.后插入): <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...

  9. 前端框架——Jquery——基础篇2__获取DOM节点的值

    对于获取DOM节点的内容,Jquery提供了四种方法,html,text,val,attr.下面来分别介绍这四种方法和它们的区别.下面以例子来说明 我写的JSP页面内容如下: 1 <div id ...

最新文章

  1. 基于成像激光雷达的鲁棒位置识别
  2. SpringBoot 用RestTemplate 优雅的发送HTTP请求,注意需要@Autowired注入后才能用
  3. 改造HINT的输出方式
  4. Silverlight客户端分页 DataPager控件的使用
  5. 4位快速加法器和4位串行加法器相比_使用混合信号示波器调试串行总线系统
  6. saleor的测试用账户地址This value is not valid for the address
  7. onnx 测试_ONNX 现场演示教程
  8. SQL Server 查询性能优化——覆盖索引(一)
  9. mysql数据结合使用_MySQL数据行操作
  10. lambda表达式和切片
  11. C# CefSharp 可监听请求等
  12. python柱状图颜色_Python 绘制 柱状图
  13. 怎么把视频和图片拼在一起?朋友圈会动的拼图视频,快速制作技巧
  14. Linux环境部署:开启电脑虚拟化
  15. 三八节活动答题运营复盘
  16. String的xml转map
  17. 安装配置Glusterfs
  18. 中国B2B跨境电子商务物流发展研究
  19. android path拆分_Android知识总结——Path常用方法解析
  20. 基于Matlab使用地面雷达探测和跟踪LEO卫星星座仿真(附源码)

热门文章

  1. 合同相似可逆等价矩阵的关系及性质_线性代数预习自学笔记-11:等价性与相似性...
  2. php提交表单处理,PHP表单处理
  3. 为什么开发者应该摒弃敏捷?(转)
  4. 采样次数不同平均值不一样_网络推广采取的方式不同,效果也不一样
  5. HTML---HTML中常用的标签(标题,水平,特殊标签)
  6. sketch钢笔工具_设计工具(Sketch,Adobe XD,Figma和InVision Studio)中奇怪的一项功能
  7. jmeter学习指南之聚合报告
  8. Android.对话框(AlertDialog/Toast/Snackbar)
  9. U Sparkle 开发者计划招募中!
  10. 配置SSH非管理员用户登录