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. Jenkins初体验-安装与部署服务

    一.概述 1.简介 在工作中接触到CD/CI,Devops相关的技术,本文记录Jenkins的基本使用.Jenkins是一款开源的持续集成工具,能够集成一套自动化部署任务. 目标 通过jenkins从 ...

  2. Spring源码解析之@Configuration

    @Configuration简介 用于标识一个类为配置类,与xml配置效果类似 用法简介 public class TestApplication { public static void main( ...

  3. pat 1013 Battle Over Cities（25 分） (并查集)

    1013 Battle Over Cities(25 分) It is vitally important to have all the cities connected by highways i ...

  4. RHEL7.2 安装Hadoop-2.8.2

    创建三台虚拟机,IP地址为:192.168.169.101,192.168.169.102,192.168.169.103 将192.168.169.102为namenode,192.168.169. ...

  5. 阿里云ECS服务器部署HADOOP集群（三）：ZooKeeper 完全分布式集群搭建

    本篇将在阿里云ECS服务器部署HADOOP集群(一):Hadoop完全分布式集群环境搭建的基础上搭建,多添加了一个 datanode 节点 . 1 节点环境介绍: 1.1 环境介绍: 服务器:三台阿里 ...

  6. 023.掌握Pod-Pod扩容和缩容

    一 Pod的扩容和缩容 Kubernetes对Pod的扩缩容操作提供了手动和自动两种模式,手动模式通过执行kubectl scale命令或通过RESTful API对一个Deployment/RC进行 ...

  7. 小白学习React官方文档看不懂怎么办？2.JSX语法

      接下来我们就要讲到JSX语法了,在我们讲它之前,我们先引入一个概念叫语法糖.     听到这个名字首先我们可能会想到一个词叫”糖衣炮弹“,那么什么叫糖衣炮弹呢,就是给你说各种好听的话,来迷惑你,但 ...

  8. 微博验证码的识别并登录获取cookies

    记得以前微博是用的宫格验证码,现在不一样了,用的是滑块验证码和 点触验证码,每天登陆的第一次基本用的是滑块,继续登录就都用的是点触验证码.所以滑块验证码不写,感兴趣的可以补上. 代码: 这里用的超级鹰 ...

  9. python 面向对象的基本概念（未完待续）

    面向对象编程简称OOP(Object-oriented-programming),是一种程序设计思想. 面向过程编程(如C语言)指一件事该怎么做,面向对象编程(如Java.python)指一件事该让谁 ...

  10. Anaconda中启动Python时的错误：UnicodeDecodeError: 'gbk' codec can't decode byte 0xaf in position 553

    今天,在Anaconda prompt启动python遇到了如下错误: UnicodeDecodeError: ‘gbk’ codec can’t decode byte 0xaf in positi ...