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. js基础总结02--字符串操作

    1.字符串中对单个字符位置的操作 indexOf(char); 从左往右查找,返回匹配到的第一个字符的位置,没有匹配则返回-1 lastiIndexOf(char); 从右往左查找,返回匹配到的第一个 ...

  2. 『题解』Codeforces121A Lucky Sum

    更好的阅读体验 Portal Portal1: Codeforces Portal2: Luogu Description Petya loves lucky numbers. Everybody k ...

  3. 使用requests实现人人网登录，并做cookie维持

    import requests import re,time s = requests.Session() def doLogin(): login_url = 'http://www.renren. ...

  4. mysql并发量过大造成 update语句更新错误

    mysql并发量过大造成 update语句更新错误 在同一字段的时候更新的时候 如果并发量太大 就会更新错误 这个时候只能用 swoole 消息队列更新

  5. 如何基于k8s快速搭建TeamCity（YAML分享）

    前言 最近有朋友基于之前的博客<Docker最全教程之使用TeamCity来完成内部CI.CD流程(十七)>搭建TeamCity时出现了一些问题,由于平常比较忙,没有及时答复,非常抱歉. ...

  6. nyoj 69-数的长度 (log10()，计算数的位数)

    69-数的长度 内存限制:64MB 时间限制:3000ms 特判: No 通过数:10 提交数:13 难度:1 题目描述: N!阶乘是一个非常大的数,大家都知道计算公式是N!=N*(N-1)····· ...

  7. Activity生命周期理解

    在Android应用程序运行时,Activity的活动状态由Android以Activity栈的形式管理,当前活动的Activity位于栈顶.随着应用程序之间的切换.关闭等,每个Activity都有可 ...

  8. 实现 Redis 协议解析器

    本文是 <用 Golang 实现一个 Redis>系列文章第二篇,本文将分别介绍Redis 通信协议 以及 协议解析器 的实现,若您对协议有所了解可以直接阅读协议解析器部分. Redis ...

  9. PostgreSQL各数据类型的内置函数

    参考<PostgreSQL实战> 3.1.2 数字类型操作符和数学函数 PostgreSQL 支持数字类型操作符和丰富的数学函数 例如支持加.减.乘.除.模取取余操作符 SELECT 1+ ...

  10. 如何利用快照（ snapshot ）功能快速定位性能问题

    我们常常会遇到这样的困惑,收到用户或者客服的反馈,平台使用有问题,但是测试人员搭建环境后又没办法复现故障,最后导致问题没法解决,眼睁睁地看着用户流失. 这是因为线上生产环境非常复杂.很多时候是偶发性  ...