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() //创建一个文本节 ...
随机推荐
- 6.1Hadoop属性Configuration配置API
6.1 Hadoop属性配置API Hadoop需要添加一些自定义的属性值,可以通过Configuration类的实例来加载xml配置文件中的属性值. (1) xml配置文件的格式 <?x ...
- 基于typedef的用法详解【转】
也许新手用这个关键字不多,但它却是一个很有用的关键字,可以使代码模块化程度更好(即与其它代码的关联较少),在C++中还是实现Traits技术的基础,也是模板编程的基本语法之一. 若说变量定义是为变量命 ...
- beacon帧字段结构最全总结（三）——VHT字段总结
VHT Capabilities 802.11ac作为IEEE 无线技术的新标准,它借鉴了802.11n的各种优点并进一步优化,除了最明显的高吞吐特点外,不仅可以很好地兼容802.11a/n的设备,同 ...
- HttpClient 上传文件
/// <summary> /// 发送post请求 /// </summary> /// <param name="filePath">文件路 ...
- java中 equals和==区别
一.java当中的数据类型和“==”的含义: 基本数据类型(也称原始数据类型) :byte,short,char,int,long,float,double,boolean.他们之间的比较,应用双等号 ...
- nuxt遇到的问题（一）window 或 document is not defined
因为用了VUE做的官网,既然是官网了避免不了SEO的问题了(该死当初就不应该选择用vue) 很自然就是选择了使用nuxt.js来做ssr预渲染了. 因为网站不是响应式的,PC / 移动端要进行对应跳转 ...
- hdu 1878 欧拉回路（联通<并查集> + 偶数点）
欧拉回路Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- 力扣（LeetCode）删除排序链表中的重复元素II 个人题解
给定一个排序链表,删除所有含有重复数字的节点,只保留原始链表中 没有重复出现 的数字. 思路和上一题类似(参考 力扣(LeetCode)删除排序链表中的重复元素 个人题解)) 只不过这里需要用到一个前 ...
- 扛把子组20191107-4 beta week 2/2 Scrum立会报告+燃尽图 03
此作业的要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9956 一.小组情况 队名:扛把子 组长:孙晓宇 组员:宋晓丽 梁梦瑶 韩 ...
- Towards Universal Object Detection by Domain Attention
论文及代码 论文地址:https://arxiv.org/abs/1904.04402 代码:http://www.svcl.ucsd.edu/projects/universal-detection ...