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. 同余类BFS的一些瞎吹

    同余类BFS的题,是个OIer基本上都会见过一些,最好的例子就是NOIP 2018 day1  T2---货币系统 虽然这题其实是什么背包就能解决的题目,但数据一变大,出题人坏一点,就没了.... 同 ...

  2. 第一行python代码

    Hello Python 其实和大家一样为了以后多一条生存之路,本人也比较感兴趣python,因为它相比较JAVA来说,实现功能真的太方便了. 万事开头难,python不例外,本人在校过程学习了jav ...

  3. EFK教程 - ElasticSearch高性能高可用架构

    通过将elasticsearch的data.ingest.master角色进行分离,搭建起高性能+高可用的ES架构 作者:"发颠的小狼",欢迎转载与投稿 目录 ▪ 用途 ▪ 架构 ...

  4. jstl-将List中的数据展示到表格中

    功能: 使用jstl将List中的数据动态展示到Jsp表格中,并实现隔行换色功能. 效果图: Jsp代码: <%@ page import="java.util.ArrayList&q ...

  5. 【持续更新】【pat】pat刷题技巧记录

    修改code completion快捷键位CTRL+ENTER,帮助提示函数名称 修改命令行提示符的属性,开启快速编辑模式,方便调试 添加c++11语言标准支持 开启代码调试功能 对输入的字符串进行切 ...

  6. Nebula 架构剖析系列（二）图数据库的查询引擎设计

    摘要 上文(存储篇)说到数据库重要的两部分为存储和计算,本篇内容为你解读图数据库 Nebula 在查询引擎 Query Engine 方面的设计实践. 在 Nebula 中,Query Engine ...

  7. hdu 1754 I Hate It (线段树、单点更新)（PS：ios::sync_with_stdio(false)可以加快cin、cout的读取写出速度）

    I Hate ItTime Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  8. Spring boot 加入shiro支持

    在项目添加依赖 <!-- shiro spring. --> <dependency> <groupId>org.apache.shiro</groupId& ...

  9. tensorflow学习笔记——模型持久化的原理，将CKPT转为pb文件，使用pb模型预测

    由题目就可以看出,本节内容分为三部分,第一部分就是如何将训练好的模型持久化,并学习模型持久化的原理,第二部分就是如何将CKPT转化为pb文件,第三部分就是如何使用pb模型进行预测. 一,模型持久化 为 ...

  10. Few-shot Object Detection via Feature Reweighting (ICCV2019)

    论文:https://arxiv.org/abs/1812.01866 代码:https://github.com/bingykang/Fewshot_Detection 1.研究背景 深度卷积神经网 ...