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 ...
随机推荐
- Oracle Redo
Redo log 重做日志在Oracle数据库中,有一种日志文件叫做重做日志文件,他就是大家俗称的:redolog.在redolog中又分为两种:在线重做日志与归档日志. ONLINE Redo lo ...
- c++ 字符串流 sstream(常用于格式转换) 【转载】
使用stringstream对象简化类型转换C++标准库中的<sstream>提供了比ANSI C的<stdio.h>更高级的一些功能,即单纯性.类型安全和可扩展性.在本文中, ...
- 十进制转为N进制
昨天笔试遇到的题,如果是正数,不断以余数做除法即可: void convert(int num, int N, vector<char>& data) { int number = ...
- Android 解析JSON格式数据
比起XML,JSON主要优势在于它的体积更小,在网络上传输的时候可以更省流量.但缺点在于,它的语义性较差,显示不如XML直观. JSON格式 : { "name_A" : &qu ...
- 5.5---整数A转成整数B(CC150)
自己的: public static int calcCost(int A,int B){ int ans = 1; int temp = A ^ B; while(temp != 1){ if(te ...
- 【GoLang】与或非 异或操作
在Go规范,^这个运算符在一元运算符和二元运算符中都出现了.那么他们分别是啥?在规范中说道:^ bitwise XOR integers这是按位异或. Go语言位操作实例 <!-- lang: ...
- Post方法调用公司发Mail的接口
调用公司发Mail的接口. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- Android自定义图形shape
在Android开发过程中,经常需要改变控件的默认样式, 那么通常会使用多个图片来解决.不过这种方式可能需要多个图片,比如一个按钮,需要点击时的式样图片,默认的式样图片. 这样就容易使apk变大.另一 ...
- ios 在storyboard 和 xib中,显示自定义view的预览效果
发现FSCalendar这个控件能在xib中显示预览效果,是怎么实现的呢?其中涉及的知识又有哪些? 主要就是IBInspectable 和 IB_DESIGNABLE 先看 IBInspectable ...
- zpf 获取表单等数据的用法
2015年4月12日 12:25:35 星期日 zpf框架中获取表单数据的方法 //获得get,post,url中的数据 private function setData() { $this-> ...