<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
    <style>
    .left,
    .right {
        width: 300px;
        height: 120px;
    }
   
    .left div,
    .right div {
        width: 100px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }
   
    .left div {
        background: #bbffaa;
    }
   
    .right div {
        background: yellow;
    }
    </style>
</head>

<body>
    <h2>动态创建元素节点</h2>
    <button>点击通过jQuery动态创建元素节点</button>
    <script type="text/javascript">
    $("button").on('click', function() {
       var a = $("body");
        var di=$("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
        a.append(di)
    })
  </script>
  </body>
</html>

通过jquery创建节点以及节点属性处理的更多相关文章

  1. js进阶 11-9/10/11 jquery创建和插入节点

    js进阶 11-9/10/11 jquery创建和插入节点 一.总结 一句话总结: 1.jquery插入节点8个方法? 内部之前,内部之后,之前,之后:各两个 append()和appendTo() ...

  2. JavaScript&&jQuery创建新节点和操作属性对比

    JavaScript创建新节点和操作属性 通过JavaScript原生接口创建节点,在处理上是非常复杂与繁琐的. <!DOCTYPE html> <html lang="e ...

  3. jQuery创建节点

    注:摘自<锋利的jQuery(第二版)> 创建元素节点 例如要创建两个<li>元素节点,并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上.完成这个任务需 ...

  4. jQuery_DOM学习之------创建节点及节点属性

    DOM创建节点及节点属性 一.创建新的节点并添加到dom中 dom 节点创建的过程(创建节点<元素.属性.文本等>.添加节点的属性.加入到文档中) jQuery创建元素节点的方法: 创建元 ...

  5. 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点？ 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝

    第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...

  6. jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法

    jQuery操作节点我们可以分六点来讲,查找节点.创建节点.插入节点.删除节点.替换节点.复制节点. 一.查找节点 text() - 设置或返回所选元素的文本内容   ,html() - 设置或返回所 ...

  7. 原生JS的使用，包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

    一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...

  8. jquery 源码解析 节点遍历

    jquery遍历,用于根据其相对于其他元素的关系来查找或选取html元素,以某项选择开始,并沿着这个选择移动,知道移动被称为对dom进行遍历 ☑ <div> 元素是 <ul> ...

  9. jQuery-2.DOM---创建节点及节点属性

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

随机推荐

  1. ZOHO的下一个25年：用心为企业服务

    来源:中国软件网 作者:海策 在25周年会上,ZOHO大中华区总裁侯康宁先生豪情壮志,"25岁的ZOHO,已经成长为非典型一线大厂." 1996年,ZOHO成立.截止2021年,Z ...

  2. Alien 魔法：RPM 和 DEB 互转

    Alien 魔法:RPM 和 DEB 互转 作者: Gabriel Cánepa 译者: LCTT joeren | 2015-08-31 10:45   评论: 6 收藏: 10 正如我确信,你们一 ...

  3. stm32.cube（一）——系统架构及目录结构

    一.前言 Arm的应用场景往往比51单片机复杂得多,如果一个高级应用的开发需要连底层的结构性代码都要重构,那么在成本和研发周期上就会面临巨大的风险.为了简化编码过程,芯片厂商经常会提供一些板卡级支持的 ...

  4. 11.10 chkconfig：管理开机服务

    chkconfig 命令是Redhat系列的Linux系统中的系统服务管理工具,它可以用于查询和更新不同的运行等级下系统服务的启动状态. chkconfig命令的参数选项及说明 --list    显 ...

  5. INFJ名言

    财富是由什么构成的? 按世俗的观点,就是占有金钱和财宝. 但如果我们用除金钱之外的其他方式来衡量财富, 那么许多在物质上匮乏的人在精神上却是富有的, 许多在物质上富有的人在精神上却是匮乏的. The ...

  6. 安装JDK 常见错误解决（Day_07）

    在cmd中输入java -version或者java 或出现以下错误: 原因一:可能是你的JDK装的时间比较早,导致环境变量中的Path(此电脑->右击属性->高级系统设置->环境变 ...

  7. Windows 10正式版官方原版镜像！(备忘)

    本文搜集整理微软官方发布的Windows 10正式版镜像下载链接,从RTM原始正式版开始,按照时间倒序排列,即越往上的越新. 注意:以下资源均来自于微软官方原版,ed2k可视为P2P下载链接.下载完成 ...

  8. 技术干货 | 关于 WKWebview 网络拦截，你想知道的都在这里

    原生 WKWebView 在独立于 app 进程之外的进程中执行网络请求,请求数据不经过主进程,因此在 WKWebView 上直接使用 NSURLProtocol 是无法拦截请求的. 但是由于 mPa ...

  9. Apple Xcode 12.5 (12E262) 正式版发布 - 构建 Universal App

    请访问原文链接:https://sysin.org/article/apple-xcode-12/,查看最新版.转载请保留出处. Xcode 12 简介 Xcode 12 采用全新设计,在 macOS ...

  10. 「 洛谷 」P2151 [SDOI2009]HH去散步

    小兔的话 欢迎大家在评论区留言哦~ HH去散步 题目限制 内存限制:125.00MB 时间限制:1.00s 标准输入 标准输出 题目知识点 动态规划 \(dp\) 矩阵 矩阵乘法 矩阵加速 矩阵快速幂 ...