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() //创建一个文本节 ...
随机推荐
- Topshelf+Quatz.Net的简单使用
Topshelf+Quatz.Net的简单使用 一 Topshelf概述 Topshelf是创建Windows服务的另一种方法,老外的一篇文章Create a .NET Windows Servic ...
- Asp.net Core 系列之--2.ORM初探:Dapper实现MySql数据库各类操作
ChuanGoing 2019-09-10 距离上一篇近一个月时间,断断续续才把本篇码完,后面将加快进度,争取年度内把本系列基本介绍完成,同时督促本人持续学习. 本篇学习曲线: 1.初识Dapper ...
- 洛谷P3452 [POI2007]BIU-Offices的思考
这题就是坑人的,因为way我前一半存正图,后一半存反图,导致一般扩大两倍过不了,而是要扩大四倍,就是这个坑!!!!! #include<iostream> #include<cstd ...
- 简单搭建DNS服务器——bind
1安装bind yum install -y bind bind-utils bind-chroot 2 修改配置文件 # grep '^[^#]' /etc/named.conf options { ...
- jquery手机端横屏判断方法
jquery手机端横屏判断方法<pre>$(function() { var bodywidth = $('body').width(); var bodyheight = $('body ...
- Jenkins初体验-安装与部署服务
一.概述 1.简介 在工作中接触到CD/CI,Devops相关的技术,本文记录Jenkins的基本使用.Jenkins是一款开源的持续集成工具,能够集成一套自动化部署任务. 目标 通过jenkins从 ...
- 张孝祥java高新技术 --- jkd1.5 新特性 -- 精华总结
1. 抽象方法的使用 如果一个方法中大量出现if语句, 那么, 就应该考虑使用抽象来处理. 如下例: package com.lxl; public class Weekend { //周日 publ ...
- java编程思想第四版第八章习题
第一题 package net.mindview.polymorphism; //基类-自行车 class Cycle{ } //子类-单轮车 class Unicycle extends Cycle ...
- 逆向libbaiduprotect（三）- 移植python操作dalvik虚拟机c++函数，配合gdb控制程序运行流程
python编译移植到测试机,并且移植ctypes模块.利用ctypes代替c程序,利用dalvik内部c++函数,在运行过程中手动命令操控dalvik虚拟机,并结合gdb进行调试.绕过zygote和 ...
- c++中实现单例模式singleton class
本文首发于个人博客https://kezunlin.me/post/8932eaec/,欢迎阅读! singleton class and usage in c++. Guide what singl ...