JavaScript&&jQuery创建新节点和操作属性对比
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创建新节点和操作属性对比的更多相关文章
- javascript中创建新节点的方法 标签： javascript 2016-12-25 11:38 55人阅读 评论(0)
一. var newnode=document.createElement("i"); var newnodeText=document.createTextNode(" ...
- JavaScript jQuery 中定义数组与操作及jquery数组操作
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
- JavaScript jQuery 中定义数组与操作及jquery数组操作 http://www.jb51.net/article/76601.htm
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
- jQuery总结02_jq的dom操作+属性操作
一:JQuery知识点 *:JQuery的dom操作 *:获取节点.给节点添加内容 *:动态创建dom节点 比如动态创建表格等,在js里面进行完成. *删除节点 这里面的删除就是将其放在了一个地方,并 ...
- JavaScript HTML DOM元素节点常用操作接口
在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...
- jquery中的节点的操作
节点的操作 Dom 文档对象 模型 解决 一．插入节点 Append() 在每个匹配的元素中追加内容 Var $li_1= “<li></li>”; Var $li_2 = ...
- JQuery知识快览之五—操作属性和结构
前文提到JQuery提供了丰富的内置方法来操作对象集,本文主要介绍JQuery中的那些内置操作属性和DOM结构的方法. prop还是attr? 从JQuery1.6版开始,新增了prop方法来获取和设 ...
- Javascript动态创建 style 节点
有很多提供动态创建 style 节点的方法,但是大多数都仅限于外部的 css 文件.如何能使用程序生成的字符串动态创建 style 节点,我搞了2个小时. 静态外部 css 文件语法: @import ...
- 1.javascript节点的操作 创建、添加、移除、移动、复制、插入（修改）
(1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节 ...
随机推荐
- Mybaits 源码解析 （十）----- 全网最详细，没有之一：Spring-Mybatis框架使用与源码解析
在前面几篇文章中我们主要分析了Mybatis的单独使用,在实际在常规项目开发中,大部分都会使用mybatis与Spring结合起来使用,毕竟现在不用Spring开发的项目实在太少了.本篇文章便来介绍下 ...
- 大数据之路day01_2--记事本与EditPlus编写Hello World并且运行
在上一节我们成功的安装JAVA并且将其环境配置成功,接下来我们来编写第一个java程序——Hello World 1.利用记事本编写代码,利用命令行来编译运行 (1)新建记事本,(文件名).java后 ...
- linux 系统移植uboot
这里使用的版本为:u-boot-2014.04 查看并修改位置如下:u-boot-2014.04/include/configs/at91sam9x5ek.h(1)查看一下Linux内核在NandFl ...
- Uber Go 语言编码规范
Uber Go 语言编码规范 Uber 是一家美国硅谷的科技公司,也是 Go 语言的早期 adopter.其开源了很多 golang 项目,诸如被 Gopher 圈熟知的 zap.jaeger 等.2 ...
- 全栈项目|小书架|服务器开发-JWT 详解
JWT 官方简介:Introduction to JSON Web Tokens 文章基本是官网内容的翻译,英文不错的同学可点击上面的链接直接看英文文档. 什么是 JWT JWT全称是JSON Web ...
- JVM,JDK,JRE
JVM,JDK,JRE 什么是JVM Java 虚拟机. 这个名词由Java和虚拟机前后两部分组成. 它有和其他虚拟机共性:JVM是通过软件模拟的计算机系统. 它也有自己的特性:JVM使用软件模拟的指 ...
- centos7 编译安装 php7.3.11
1.安装依赖 yum install -y libxml2 *openssl* libcurl* libjpeg* libpng* freetype* libmcrypt* gcc gcc-c++ 2 ...
- Mirantis 收购 Docker | 云原生生态周报 Vol. 28
作者 | 禅鸣.进超.心水.心贵 业界要闻 Docker 将 Docker Enterprise 卖给 Mirantis Mirantis 是一家扎根于 OpenStack 的云公司,最近专注于 Ku ...
- （二十九）golang--map
map:是key-value数据结构,又称为字段或者关联数组,类似其它编程语言的集合: 基本语法:var 名称 map[键类型]值类型 key的类型可以是:bool.数字.string.指针.管道,还 ...
- EFK教程(3) - ElasticSearch冷热数据分离
基于ElasticSearch多实例架构,实现资源合理分配.冷热数据分离 作者:"发颠的小狼",欢迎转载与投稿 目录 ▪ 用途 ▪ 架构 ▪ 192.168.1.51 elasti ...