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() //创建一个文本节 ...
随机推荐
- go语言版本测试, 一段错误代码引发的血案
起因: 最近在学习手写docker,看到了一段会编译错误的代码. 过程: 最近在学习docker,看到一段示例代码,每次编译时会报错. 因此, 无法继续下去, 只好在网上搜索解决方案, 用了很多时间, ...
- python学习之【第六篇】：Python中的字典及其所具有的方法
1.前言 字典是python中唯一的映射类型,采用键值对(key-value)的形式存储数据.python对key进行哈希函数运算,根据计算的结果决定value的存储地址,因此,字典的key必须是可哈 ...
- 爬虫学习--Day3(小猿圈爬虫开发_1)
爬虫基础简介 前戏: 1.你是否在夜深人静的时候,想看一些让你更睡不着的图片 2.你是否在考试或者面试前夕,想看一些具有针对性的题目和面试题 3.你是否想在杂乱的网络世界中获取你想要的数据 什么是爬虫 ...
- Docker 学习 | 基础命令
基本概念定义 基本组成 客户端/守护进程 C/S架构 本地/服务器 镜像 容器基石 只读文件系统 联合加载(union mount) 容器 通过镜像启动 执行 写时复制 仓库 公有 docker hu ...
- Genymotion模拟器安装搜狗输入法
Genymotion模拟器默认没有中文输入法,如果在一些调试中涉及到需要输入中文则必须需要安装中文输入法. 这里以搜狗输入法为例. 这里需要注意一下几点就行: 百度下载一个搜狗输入法,需要特别注意的是 ...
- Redis实战--Jedis实现分布式锁
echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!!! 分布式 ...
- 网站搭建-虚拟机的使用-Linux （包括输入法和QQ下载使用）
之前已经联网了,基本的软件系统会自己下载,先不用管. 1. 先下载一个中文输入法吧: 先改一下Firefox的搜索引擎吧,因为大陆不支持google 下载,安装,就完事了,还好这个没变,几年不用这个系 ...
- 在VMware15.5中安装CentOS7_7_64bit
一.创建虚拟机 在我的另一个随笔里有. 地址为:https://www.cnblogs.com/qi-yuan/p/11692092.html 只是在虚拟机安装操作系统时候选择 Linux 而不是 W ...
- jquery 向页面追加HTML
jquery 向页面追加HTML append 函数 例子: <div id="append-test"></div> <script type=&q ...
- hdu 1269 迷宫城堡 (tarjan)
迷宫城堡Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...