JavaScript&&jQuery创建新节点和操作属性对比

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

JavaScript创建新节点和操作属性

通过JavaScript原生接口创建节点，在处理上是非常复杂与繁琐的.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>

<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>

<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&colon;38 55人阅读评论(0)
一. var newnode=document.createElement("i"); var newnodeText=document.createTextNode(" ...
JavaScript jQuery 中定义数组与操作及jquery数组操作
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
JavaScript jQuery 中定义数组与操作及jquery数组操作 http&colon;//www&period;jb51&period;net/article/76601&period;htm
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
jQuery总结02&lowbar;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&period;javascript节点的操作创建、添加、移除、移动、复制、插入（修改）
(1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节 ...

随机推荐

架构师养成记--8&period;Queue
一.ConcurrentLinkedQueue 是一个适合在高并发场景下,无锁,无界的,先进先出原则.不允许为null值,add().offer()加入元素,这两个方法没区别:pull().peek( ...
HTML5、canvas颜色拾取器
效果图: 代码: <!doctype html> <html lang="en"> <head> <meta charset=" ...
《Entity Framework 6 Recipes》翻译系列 (5) -----第二章实体数据建模基础之有载荷和无载荷的多对多关系建模
2-3 无载荷(with NO Payload)的多对多关系建模问题在数据库中,存在通过一张链接表来关联两张表的情况.链接表仅包含连接两张表形成多对多关系的外键,你需要把这两张多对多关系的表导入到 ...
zookeeper原理及作用
ZooKeeper是Hadoop Ecosystem中非常重要的组件,它的主要功能是为分布式系统提供一致性协调(Coordination)服务,与之对应的Google的类似服务叫Chubby.今天这篇 ...
python入门基础代码
#查找index函数的帮助 help(str.index) #for循环和break语句from math import sqrtfor i in range(2,101): flag=1 k=int ...
sp&lowbar;help 快速查看表结构、视图信息
sp_helptext: 是MS SQL Server的一个系统存储过程,可以通过它来查看存储过程或者视图.函数源码示例:sp_helptext viewName (viewName 即要查询的存 ...
Java 遍历Map时删除元素
Java代码 package,,,,,,,,,,,==){ System.out.println("delete this: "+key+" = "+key ...
[转]z-order引出的问题
在窗口与窗口之间毫无重叠的情况下,根本不需要关心z-order.然而,当窗口之间出现重叠时,系统就需要通过一个标准来确定窗口的显示顺序.这个标准就是z-order.存在多个因素影响一个窗口的z-ord ...
Js作用域与作用域链详解[转]
一直对Js的作用域有点迷糊,今天偶然读到JavaScript权威指南,立马被吸引住了,写的真不错.我看的是第六版本,相当的厚,大概1000多页,Js博大精深,要熟悉精通需要大毅力大功夫. 一:函数作 ...
【JSTL EL】 jsp 页面学习
JSTL(JSP Standard Tag Library,JSP标准标签库)是一个不断完善的开放源代码的JSP标签库,是由apache的jakarta小组来维护的.JSTL只能运行在支持JSP1.2 ...