JavaScript创建新节点和操作属性

通过JavaScript原生接口创建节点，在处理上是非常复杂与繁琐的.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>练习</title>

    <!-- 用到的知识点:

        01...创建元素document.createElement

        02...设置属性addAttribute

        03...添加文本document.innerHTML

        04...加入文档appendChild

        05...给元素添加事件句柄document.addEventListener

        06...给节点添加类名className -->

        <style>

            .div1{

                width: 100px;

                height: 100px;

                background-color: pink;

            }

            .newdiv{

                width: 200px;

                height: 200px;

                background-color: blue;

            }

        </style>

</head>

<body>

    <div class="div1">点击此处区域会动态创建节点</div>

    <script>

        var body = document.querySelector("body")

        document.addEventListener("click",function(){

            var yuansu = document.createElement("div");

            yuansu.className="newdiv";

            yuansu.innerHTML = "这是创建出来的新的div";

            body.appendChild(yuansu);

        },false);

    </script>

</body>

</html>

jQuery创建新节点及操作属性

我们通过jQuery把上面的代码改造一下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>节点的创建与属性的处理</title>

    <script src="../jQuery库/jquery-3.3.1.js"></script>

    <!-- 用到的知识点:

        01...给元素添加事件句柄:on

        02...加入文档:append -->

    <style>

        .hello{

            width: 200px;

            height: 200px;

            background-color: pink;

        }

        .world{

            width: 100px;

            height: 100px;

            background-color: blue;

        }

    </style>

</head>

<body>

    <div class="hello">点击body区域可以动态创建节点</div>

    <script>

        $('body').on("click",function(){

            var div = $("<div class='world'>这是新的div</div>");

            $('body').append(div);

        })

    </script>

</body>

</html>

这就是jQuery创建节点的方式，让我们保留HTML的结构书写方式，非常的简单、方便和灵活

JavaScript&&jQuery创建新节点和操作属性对比的更多相关文章

  1. javascript中创建新节点的方法 标签： javascript 2016-12-25 11:38 55人阅读 评论(0)

    一. var newnode=document.createElement("i"); var newnodeText=document.createTextNode(" ...

  2. JavaScript jQuery 中定义数组与操作及jquery数组操作

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...

  3. JavaScript jQuery 中定义数组与操作及jquery数组操作 http://www.jb51.net/article/76601.htm

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...

  4. jQuery总结02_jq的dom操作+属性操作

    一:JQuery知识点 *:JQuery的dom操作 *:获取节点.给节点添加内容 *:动态创建dom节点 比如动态创建表格等,在js里面进行完成. *删除节点 这里面的删除就是将其放在了一个地方,并 ...

  5. JavaScript HTML DOM元素节点常用操作接口

    在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...

  6. jquery中的节点的操作

    节点的操作 Dom 文档对象 模型 解决 一．插入节点 Append() 在每个匹配的元素中追加内容 Var  $li_1= “<li></li>”; Var  $li_2 = ...

  7. JQuery知识快览之五—操作属性和结构

    前文提到JQuery提供了丰富的内置方法来操作对象集,本文主要介绍JQuery中的那些内置操作属性和DOM结构的方法. prop还是attr? 从JQuery1.6版开始,新增了prop方法来获取和设 ...

  8. Javascript动态创建 style 节点

    有很多提供动态创建 style 节点的方法,但是大多数都仅限于外部的 css 文件.如何能使用程序生成的字符串动态创建 style 节点,我搞了2个小时. 静态外部 css 文件语法: @import ...

  9. 1.javascript节点的操作 创建、添加、移除、移动、复制、插入（修改）

    (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节 ...

随机推荐

  1. m98 lsc rp-- 赛

    lsc 这次又烧rp了! T1随机化艹spj 本机测试输出字符串长度没有低于1W的,考完发现凉凉 但是lemon又救了我的*命,垃圾lsc又烧rp了!

  2. 品优购(IDEA版)-第二天

    品优购-第2天 学习目标 目标1:运用AngularJS前端框架的常用指令 目标2:完成品牌管理的列表功能 目标3:完成品牌管理的分页列表功能 目标4:完成品牌管理的增加功能 目标5:完成品牌管理的修 ...

  3. springboot~高并发下耗时操作的实现

    高并发下的耗时操作 高并发下,就是请求在一个时间点比较多时,很多写的请求打过来时,你的服务器承受很大的压力,当你的一个请求处理时间长时,这些请求将会把你的服务器线程耗尽,即你的主线程池里的线程将不会再 ...

  4. Linux下编写-makefile-详细教程（跟我一起写-Makefile-Markdown整理版）

    目录 概述 关于程序的编译和链接 Makefile 介绍 Makefile的规则 一个演示例子 make是怎样工作的 makefile中使用变量 让make自己主动推导 另类风格的makefile 清 ...

  5. ASP.NET Core 3.0 gRPC 身份认证和授权

    一.开头聊骚 本文算是对于 ASP.NET Core 3.0 gRPC 研究性学习的最后一篇了,以后在实际使用中,可能会发一些经验之文.本文主要讲 ASP.NET Core 本身的认证授权和gRPC接 ...

  6. pat 1136 A Delayed Palindrome（20 分）

    1136 A Delayed Palindrome(20 分) Consider a positive integer N written in standard notation with k+1 ...

  7. TestNG+Maven+IDEA 环境配置+入门

    一.环境配置 1.安装IDEA(参考:https://blog.csdn.net/m0_38075425/article/details/80883078) 2.在Prefernces,通过Plugi ...

  8. STDN: Scale-Transferrable Object Detection论文总结

    概述 STDN是收录于CVPR 2018的一篇目标检测论文,提出STDN网络用于提升多尺度目标的检测效果.要点包括:(1)使用DenseNet-169作为基础网络提取特征:(2)提出Scale-tra ...

  9. Liunx 安装配置zsh和oh-my-zsh 替换 bash

    一.前言 本文将基于 Liunx 环境安装配置zsh 和 oh-my-zsh 替换 bash oh my zsh Liunx默认shell是单调的bash,而zsh比较高大上,bash有的功能,zsh ...

  10. python+selenium +unittest生成HTML测试报告

    python+selenium+HTMLTestRunner+unittest生成HTML测试报告 首先要准备HTMLTestRunner文件,官网的HTMLTestRunner是python2语法写 ...