jQuery – 7.动态创建Dom、删除节点
动态创建Dom节点
3.prepend,在元素的开始添加元素。 prependTo。after,在元素之后添加元素(添加兄弟)。before:在元素之前添加元素(添加兄弟)。
删除节点
动态创建Dom节点
1.使用$(html字符串)来创建Dom节点,并且返回一个jQuery对象,然后调用append等方法将新创建的节点添加到其他节点(元素)中:
var link = $("<a href='http://www.baidu.com'>百度</a>");
$("div:first").append(link);
$()创建的就是一个jQuery对象,可以完全进行操作
var link = $("<a href='http://www.baidu.com'>百度</a>");
link.text("百毒");
$("div:first").append(link);
。getElementByid的问题
2.append方法用来在元素的末尾追加元素
案例:动态生成网站列表
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Jqeury/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
//判断页面上是否有table
$("input[value=提交]").click(function () {
if ($("#tb").length > 0) {
return;
}
var json = [
{ "name": "cnblog", "site": "http://www.cnblogs.com" },
{ "name": "cnbeat", "site": "http://www.cnbeat.com" },
{ "name": "qiushibaike", "site": "http://www.qiushibaike.com" }
];
var $tb = $("<table id='tb' border='1' width='300'></table>");
$("#d1").append($tb);
$.each(json, function () {
var $tr = $("<tr></tr>");
$tb.append($tr);
var $td = $("<td><a href='" + this.site + "'>" + this.name + "</td>");
$tr.append($td);
$td = $("<td>" + this.site + "</td>");
$tr.append($td);
})
})
})
</script>
</head>
<body>
<div id="d1">11111</div>
<input type="button" value="提交" />
</body>
</html>
练习:输入员工,员工个数不确定(动态生成文本框)
创建出的元素没有append到界面之前是无法用选择器找到的,就像new一个对象
3.prepend,在元素的开始添加元素。 prependTo。
after,在元素之后添加元素(添加兄弟)。
before:在元素之前添加元素(添加兄弟)。
删除节点
(1)remove()删除选择的节点
案例:清空ul中的项,代码见备注。$(“ul li.testitem”).remove(); 删除ul下li中有testitem样式的元素。自杀。把找到的都删掉。
remove方法的返回值是被删除的节点对象,还可以继续使用被删除的节点。比如重新添加到其他节点下
var lis = $("#ulSite li").remove();
$("#ulSite2").append(lis); // $("#ulSite li").remove().appendTo($("#ulSite2"));
(2)empty()是将节点清空,清除节点的innerHTML,节点还在
案例:权限选择
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Jqeury/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
$("input[value='>']").click(function() {
var $link = $("#all option:selected").remove().removeAttr("selected");
$("#sel").append($link);
//一行的效果
//$("#all option:selected").remove().removeAttr("selected").appendTo($("#sel"));
//可以去掉remove(),达到一样的效果
//$("#all option:selected").removeAttr("selected").appendTo($("#sel"));
});
})
</script>
</head>
<body>
<select id="all" size="5" multiple="multiple">
<option>查找</option>
<option>编辑</option>
<option>删除</option>
<option>添加</option>
</select>
<input type="button" value=">" />
<input type="button" value="<" />
<input type="button" value=">>" />
<input type="button" value="<<" />
<select id="sel" size="5" multiple="multiple">
</select>
</body>
</html>
练习:选美女。被悬浮行高亮显示(背景是红色),点击美女将它放到另一个的美女列表。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>4minute - 选美女</title>
<style type="text/css">
li {
width: 150px;
cursor: pointer;
}
</style>
<script src="Jqeury/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
$("#mv li").mousemove(function () {
$(this).css("background-color", "yellow");
}).mouseout(function () {
$(this).css("background-color", "white");
}).click(function () {
//remove会移除对象的事件 [但不会移除样式]
$(this).remove().appendTo($("#cn")).css("background-color", "white");
})
})
</script>
</head>
<body>
<ul id="mv">
<li>南智贤</li>
<li>金泫雅</li>
<li>权昭贤</li>
<li>许嘉允</li>
<li>全智允</li>
</ul>
<hr />
<ul id="cn">
</ul>
</body>
</html>
jQuery – 7.动态创建Dom、删除节点的更多相关文章
- DOM创建和删除节点、HTML DOM常用对象[转]
创建和删除节点:——核心DOM 1. 创建单个元素节点:3步: 1. 创建空元素节点对象: var elem=document.createElement("标 ...
- JS,Jquery,ExtJs不同脚本动态创建DOM对象
好久不来写东西了,这段时间太慢了,闲了下来看了几篇文章,觉得很好,同时也许咱们大家都能遇到,所以就把它记录下来... 简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主 ...
- JS、JQuery和ExtJs动态创建DOM对象
做了个简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主要是使用JavaScript.JQuery.ExtJs动态创建Table对象.动态Table数据填充.多选控制. ...
- JavaScript DOM编程基础精华02(window对象的属性,事件中的this,动态创建DOM,innerText和innerHTML)
window对象的属性1 window.location对象: window.location.href=‘’;//重新导航到新页面,可以取值,也可以赋值. window.location.reloa ...
- es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- Vue.js源码解析-Vue初始化流程之动态创建DOM
目录 前言 一._update 如何判断是初始化还是更新操作? 二.patch 2.1 patch 定义 2.2 初始化的 patch 三.createElm 动态创建DOM 3.1 创建组件节点 3 ...
- DOM – 7.动态创建DOM + 8.innerText innerHTML value
7.动态创建DOM 8.innerText innerHTML value 7+8 练习:案例:点击按钮动态增加网站列表,分两列,第一列为网站的名字,第二列为带网站超链接的网站名.增加三行常见网站 ...
- 动态创建dom元素
效果图如上所示: 思维nav:就相当于qq空间发表动态(说说),在输入框里输入内容,点击提交(发表),内容就呈现在下面的动态栏里.我这里是准备写一个招聘的app,大家可以随便想象下哪些情况会遇到动态创 ...
- jquery中动态新增的元素节点无法触发事件解决办法
在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法. 比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为“re ...
随机推荐
- 剑指Offer 把字符串转换成整数
题目描述 将一个字符串转换成一个整数,要求不能使用字符串转换整数的库函数. 数值为0或者字符串不是一个合法的数值则返回0 输入描述: 输入一个字符串,包括数字字母符号,可以为空 输出描述: 如果是合法 ...
- Delphi 中的 procedure of object
转载:http://www.cnblogs.com/ywangzi/archive/2012/08/28/2659811.html 总结:TMyEvent = procedure of object; ...
- 如何给ZenCart网站livezilla客服系统?
大致步骤: 1 去官网下载livezilla
- django的分页--不全也未实现
一.Django内置分页 Paginator 二.自定义分页 分页功能在每个网站都是必要的,对于分页来说,其实就是根据用户的输入计算出应该在数据库表中的起始位置. 1.设定每页显示数据条数 2.用户输 ...
- phpstorm配置代码自动同步到服务器
首先找到你的菜单栏找到Tools 然后点击配置 填写你的服务器信息 填写好项目目录 选择自动上传
- Redis系列-配置文件小结
如果不指定配置文件,Redis也可以启动,此时,redis使用默认的内置配置.不过在正式环境,常常通过配置文件[通常叫redis.conf]来配置redis. redis.conf配置格式如下: ke ...
- (转) Docker swarm 之介绍与使用
今天,在站内看到一篇关于Docker Swarm 的文章,非常好,在这里转过来,方便日后查阅 :) 原贴链接: http://www.cnblogs.com/rio2607/p/4445968.htm ...
- POJ 1321
http://poj.org/problem?id=1321 一道深搜的题目,和那个POJ3740有点相类似. 也是到了现在我才知道原来深搜也有几种套路的,以前我的都是用队列来做,那个是不需要记住什么 ...
- struts2 如何实现mvc 的?
- mysql grant ,User,revoke
mysql的权限一直都都是很关心的重点,我知道的也只是很少的一部分,对于每个数据库我习惯创建一个一个用户,该用户只对自己从属的数据库产生进行操作,在一部分的程度上可以保护自己的数据库, 比如我有一个数 ...