<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery插入,复制、替换和删除节点</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//几种添加节点的方法
//$("p").append("<b>你好吗?</b>");//向p元素中追加《b》
//$("<b>你好吗?</b>").appendTo("p");//将《b》追加到p元素中
//$("p").prepend("<b>你好吗?</b>");//向p中前置《b》
//$("<b>你好吗?</b>").prependTo("p");//将《b》前置到p元素中
//$("p").after("<b>你好吗?</b>");//向p元素后插入《b》
//$("<b>你好吗?</b>").insertAfter("p");//将《b》插入到p元素后边
//$("p").before("<b>你好吗?</b>");//在p元素之前添加《b》
//$("<b>你好吗?</b>").insertBefore("p");//将《b》插入到p元素前面
//几种删除节点的方法
//var $li=$("ul li:eq(1)").remove();//删除ul节点中第2个元素节点
//$("ul").append($li);//把刚删除的元素节点从新添加到ul元素中去
//$("ul li").remove("li[title!=菠萝]");//将ul元素下title属性不等于"菠萝"的li元素删除
//$("ul li:eq(1)").empty();//清空ul节点下第2个li元素的内容
//复制节点
/* $("ul li").click(function(){
$(this).clone(true).appendTo("ul");//复制当前点击的节点,并将它追加到《ul》元素中,当添加参数时复制它的事件
});
*/
//替换节点
//$("p").replaceWith("<strong>你最不喜欢的水果是?</Strong>");
$("[name='rp']").replaceWith("<tr><td>gg</td><td>gg</td><td>gg</td><td>gg</td></tr><tr><td>gg</td><td>gg</td><td>gg</td><td>gg</td></tr>");
});
</script>
</head>
<body>
<p>你好!</p>
你最喜欢的水果是?
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul>
</body>
</html>
如果用原始的js,可以这样写:
<ul id="s">
<li>11111111111111111</li>
<li>22222222222222222</li>
<li>33333333333333333</li>
<li>44444444444444444</li>
<li>55555555555555555</li>
</ul>
<input type="button" value="删除第2行" onclick="del(2);">
<input type="button" value="删除第3行" onclick="del(3);">
<input type="button" value="添加到最后行" onclick="add(-1,'最后行');">
<input type="button" value="添加到第二行" onclick="add(2,'第二行');">
<script>
function del(n)
{
var s=document.getElementById('s');
var t=s.childNodes.length;
for (var i=0;i<t;i++)
{
if (i==n-1)
{
s.removeChild(s.childNodes[i]);
}
}
}
function add(n,txt)
{
var s=document.getElementById('s');
var t=s.childNodes.length;
var li= document.createElement("li");
li.innerHTML=txt;
for (var i=0;i<t;i++)
{
if (n==-1)
{
s.appendChild(li);
}
else if (i==n-1)
{
s.insertBefore(li,s.childNodes[i]);
}
}
}
</script>
分享到:
相关推荐
jquery实现ul_li菜单展开收起效果.
Jquery节点插入、复制和替换方法总结
通过jquery 控制ul下li标签中的ul li列表,来实现ul的收缩和展开功能
jquery 插入节点 节点jquery 插入节点 节点
jquery-iscroll.js鼠标控制ul左右滑动
jQuery动态删除CSS UL LI中的一个列表项,实际上是动态隐藏了,并控制下层或上层单元自动对齐,这样看上去就像是删除了这一列内容一样,可以学习用JQUERY控制层的显示与隐藏的功能。
jquery+css实现的ul+li模仿下拉框表单美化效果源码.zip
下面小编就为大家带来一篇Jquery和JS获取ul中li标签的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
jquery 一键复制指定内容到剪贴板,适合web项目中有一键复制德需求。事件可以绑定到任意指定元素上,非常方便快捷。
jquery 一键复制 js一键复制到剪贴板,html一键复制功能
jquery图片栅格替换效果栅格替换效果图片栅格
采用jquery的插件实现的图片无刷新替换,可以用于新闻图片及首页图片缩略图生成不正确的替换,采用php后台。
主要介绍了JQuery实现ul中添加LI和删除指定的Li元素功能,结合完整实例形式分析了jQuery基于事件响应的页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
主要介绍了jQuery在ul中显示某个li索引号的方法,涉及jQuery遍历元素的技巧,非常具有实用价值,需要的朋友可以参考下
jquery动态复制或者删除input表单特效代码下载
jquery复制内容到剪切板
jQuery复制按钮复制指定文本,简单实用
jquery 替换节点 节点jquery 替换节点 节点
jquery图片栅格替换效果