您的位置：首页 > Web前端 > JQuery

jquery学习之1.11-通过传统方法和jquery方法进行节点添加

2014-03-27 10:52 330 查看

节点添加使用的jquery方法有以下几个：

主要代码如下：

<%@ page language="java" import="java.util.*"
pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>11</title>
<style type="text/css">
.one {width:30%;height:20%;background:#ff00ff;}
</style>
<script type="text/javascript" src="../js/jquery-1.11.0.js">
</script>
<script language="javascript">
$(document).ready(function()
{
//***********************给ul中添加一个li节点*******
$("#bt1").click(
function()
{
//两种方式
//first 直接添加
var $myli=("<li id='test' name='xuanze0'>选择0</li>");
//***********给选择3下面添加选择0******************************
//备注，如果使用.city则每个匹配对象都会添加一个li
// $("ul").append("<li>选择0</li>");
//$('#select').append($myli);

//使用appendto在后面添加
//$myli.appendTo($("ul"));

//second ：step by step
$myli=$("<li></li>");
$myli.text("选择0");
$myli.attr("id","test");
$myli.attr("name","xuenze0");
$('#select').append($myli);
}
);
$("#bt2").click(
function()
{
var $myli2=$("<li>选择4</li>");
//***********给选择1上面添加选择0******************************
$('#select').prepend($myli);
});
$("#bt4").click(
function()
{
var $myli2=$("<li>选择1——1</li>");
//***********给选择1上面添加选择0******************************
$myli2.insertAfter($("#li"));
});

$("#bt5").click(
function()
{
var $myli2=$("<li>选择3——0</li>");
//***********给选择1上面添加选择0******************************
$("#li3"). before($myli2);
});

});

//传统添加节点
function test()
{
var myli=document.createElement("li");
myli.setAttribute("id", "test");
myli.setAttribute("name","xuanze0");
myli.innerHTML="选择111";
document.getElementById("select").appendChild(myli);
}

</script>
</head>
<body>
<input type="button"  id="bt1" value="给选择3下面添加选择0" ></input>
<input type="button"  id="bt2" value="给选择1上面添加选择0" ></input>
<input type="button"  id="bt3" onclick="test()" value="给选择0上面添加选择111" ></input>
<input type="button"  id="bt4"  value="给选择1上下面添加1——1" ></input>
<input type="button"  id="bt5"  value="给选择3前面添加3——0" ></input>
<ul id="select">
<li id="li1">选择1</li>
<li id="li2">选择2</li>
<li id="li3">选择3</li>
<li id="li4">选择4</li>
<li id="li5">选择5</li>
</ul>
<div id="div1" title="第一个div" style="border:1px solid;width:20%;height:30%;float:left">div1</div>
<br>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航