使用jQuery创建节点、将节点插入到指定的位置
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function (){
//1、创建节点
//2、插入节点,在该节点的子节点的最后面插入
$("<li id='shenzhen'>[shenzhen]</li>").appendTo($("#city"));
$("#city").append("<li id='shenzhen'>shenzhen</li>"); //插入结点:在该节点的子节点的最前面插入
$("<li id='math'>数学</li>").prependTo($("#major"));
$("#major").prepend("<li id='math'>[数学]</li>"); //把新创建的节点添加到指定节点之后
$("<li id='shenzhen'>shenzhen</li>").insertAfter($("#beijing"));
$("#beijing").after("<li id='shenzhen'>[shenzhen]</li>"); //把新创建的节点添加到指定节点之前
$("<li id='shenzhen'>shenzhen</li>").insertBefore($("#beijing"));
$("#beijing").before($("<li id='shenzhen'>[shenzhen]</li>")); });
</script>
</head>
<body>
<p>选择你所喜欢的城市?</p>
<ul id="city">
<li>哈尔滨</li>
<li id="beijing">北京</li>
<li>上海</li>
<li>广州</li>
</ul>
<p>选择你所喜欢的专业?</p>
<ul id="major">
<li>计算机</li>
<li>会计</li>
<li>管理学</li>
<li>印刷工程</li>
</ul>
</body>
</html>
使用jQuery创建节点、将节点插入到指定的位置的更多相关文章
- 如何通过JQuery将DIV的滚动条滚动到指定的位置
这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位. var container = $('div'), inner = $('#inner'); container.scrol ...
- jQuery修炼心得-DOM节点的插入
1. 内部插入append()与appendTo() append:这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的情况类似. appendTo:实际上,使用这个方法是 ...
- jacascript DOM节点——元素节点、属性节点、文本节点
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! DOM节点的三个种类:元素节点.文本节点.属性节点: 元素节点 元素节点就是 HTML 标签元素,元素节点 ...
- js进阶 11-9/10/11 jquery创建和插入节点
js进阶 11-9/10/11 jquery创建和插入节点 一.总结 一句话总结: 1.jquery插入节点8个方法? 内部之前,内部之后,之前,之后:各两个 append()和appendTo() ...
- jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法
jQuery操作节点我们可以分六点来讲,查找节点.创建节点.插入节点.删除节点.替换节点.复制节点. 一.查找节点 text() - 设置或返回所选元素的文本内容 ,html() - 设置或返回所 ...
- jQuery创建节点
注:摘自<锋利的jQuery(第二版)> 创建元素节点 例如要创建两个<li>元素节点,并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上.完成这个任务需 ...
- 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点? 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝
第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...
- JavaScript&&jQuery创建新节点和操作属性对比
JavaScript创建新节点和操作属性 通过JavaScript原生接口创建节点,在处理上是非常复杂与繁琐的. <!DOCTYPE html> <html lang="e ...
- 通过jquery创建节点以及节点属性处理
<!DOCTYPE html><html> <head> <meta http-equiv="Content-type" conte ...
随机推荐
- 数据库 proc编程四
错误处理机制 当在Pro*C/C++应用程序中运行SQL语句中,Oracle会将最近执行的SQL语句的状态信息存储到状态变量SQLCODE.SQLSTATE或者SQLCA结构中. 当SQL语句执行成功 ...
- oracle起定时任务,每隔1秒执行一次
创建一个测试表和一个存储过程: create table a(a date); create or replace procedure test as begin insert into a valu ...
- UIImage 裁剪图片和等比列缩放图片
本文转载至 http://blog.csdn.net/cuiweijie3/article/details/9514293 转自 http://www.tedz.me/ios/uiimage-crop ...
- 【BZOJ3831】[Poi2014]Little Bird 单调队列
[BZOJ3831][Poi2014]Little Bird Description In the Byteotian Line Forest there are trees in a row. ...
- Map中存放数组
Map<String,Object> map = new HashMap<String, Object>(); Map<String,String> agentMa ...
- js如何遍历并取出对象的属性名?
js如何遍历并取出对象的属性名? dataObj = {name : su,age : 26,height : 18cm }; for(var st in dataObj) {console.dir( ...
- fullpage.js全屏滚动插件使用方法
在移动端经常会用到全屏滚动插件,实现常见H5活动页的效果,fullpage是一个很不错的jquery全屏滚动插件 fullpage.js插件的API:http://www.dowebok.com/77 ...
- 使用 MySQL 管理层次结构的数据
概述 我们知道,关系数据库的表更适合扁平的列表,而不是像 XML 那样可以直管的保存具有父子关系的层次结构数据. 首先定义一下我们讨论的层次结构,是这样的一组数据,每个条目只能有一个父条目,可以有零个 ...
- Uncaught TypeError: Cannot set property 'value' of null
w拼写多一个空格导致. document.getElementById(winput_id).value = value; http://stackoverflow.com/questions/161 ...
- 针对Quant的Python快速入门指南
作者:用Python的交易员 (原创文章,转载请注明出处) 最近有越来越多的朋友在知乎或者QQ上问我如何学习入门Python,就目前需求来看,我需要写这么一篇指南. 针对整个vn.py框架的学习,整体 ...