您的位置：首页 > 其它

jquary---创建节点和插入节点

2012-06-20 22:34 190 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css"></style>

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<script type="text/javascript">

$(function(){

var $btn=$("button");//首先选出按钮

$btn.click(function(){//给按钮加一个时间，并绑定一个函数

//alert($("#box").html());

//$("#box").html("<h2>这是一个box盒子</h2>");

//alert($("#box").text());//使用text()方法读取或者设置元素的innerText：$("#btn1").text()

//$("#box").text("<h2>这是一个box盒子</h2>");

//alert($("img").attr("src"));//使用attr()方法读取或者设置元素的属性

//插入节点

//var $li_1=$("<li>节点</li>");

//var $li_2=$("<li>节点</li>");

//$("ul").append($li_1)

//$("ul").append($li_2)

//以下为练习题

//var $tj=$("<li id='tj' name='tianjin'>天津</li>");

//$("ul").append($tj);

//$("p").appendTo("div");

var $li_3=$("<li>222</li>");

var $li_4=$("<li>333</li>");

//$("ul").prepend($li_3);

//$("ul").prepend($li_4);

$($li_3).prependTo("ul");

$($li_4).prependTo("ul");

/* 内部插入节点

动态创建 HTML 元素并没有实际用处, 还需要将新创建的节点插入到文档中, 即成为文档中某个节点的子节点

* append(content) :向每个匹配的元素的内部的结尾处追加内容

* appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处

* prepend(content):向每个匹配的元素的内部的开始处插入内容

* prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处*/

//$("ul").append("<li id='one' class='two'>柯达2</li>");//在内部标签的后面

//$("p").appendTo("li");//在内部标签内容的后面

//$("li").prepend("<b>Hello</b>");//在内部标签前面

//$("p").prependTo("li");//在内部标签内容的前

})

})

</script>

</head>

<body>

<button>创建节点</button>



<ul id="city">

<li id="bj" name="beijing">北京</li>

<li id="sh" name="shanghai">上海</li>

<li id="cq" name="chongqing">上海</li>

</ul>

<p>p标签的内容</p>

<div></div>

<div></div>

<ul>

<li>11</li>

<li>11</li>

<li>11</li>

<li>11</li>

</ul>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航