<!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>
分享到：
相关推荐
文章中提到的这种方法不仅仅适用于ul和li元素，还适用于其他具有包含关系的DOM元素，例如div、span等。对于有嵌套结构的元素，要获取特定元素的索引，可能需要结合使用`parent()`、`children()`、`find()`等方法来...
在使用jQuery进行网页开发时，节点的增删改查是频繁的操作之一。...以上就是关于在jQuery中进行节点插入、复制、替换和删除操作的知识点介绍。希望这些内容能够帮助你更好地理解和运用jQuery进行动态页面开发。
这篇关于“详解jQuery中的DOM操作”的文章深入介绍了jQuery如何帮助我们查找、创建、修改、插入、删除、复制、替换和包裹DOM节点，以及处理元素的属性。 首先，jQuery提供了强大的选择器系统来查找DOM节点。例如，...
在DOM操作方面，jQuery提供了便利的方法，如`.append()`、`.prepend()`、`.html()`等，用于元素的插入、替换和获取内容。例如，`$('ul').append('<li>New Item</li>')`会在无序列表末尾添加一个新的列表项。 事件...
jQuery方法支持链式调用，例如，`$("ul li:eq(1)").appendTo("ul")`和`$("ul li").remove("li[title!=菠萝]")`等，可以在一个链中连续执行多个操作。 这个实验报告展示了jQuery在网页动态交互中的灵活性和强大功能...
接着，我们可以使用各种方法来操作这些元素，如`html()`, `append()` 和 `prepend()`，它们分别用于获取、插入或替换元素的内容。 对于动态菜单栏的创建，我们通常会使用HTML来定义菜单的基本结构，CSS来控制样式，...
在网页设计和开发中，jQuery 是一个非常流行的 JavaScript 库，它简化了DOM操作、事件处理、动画设计以及Ajax交互。本篇文章将深入探讨如何利用jQuery实现可收缩展开的级联菜单以及局部刷新功能。 首先，让我们理解...
在Web应用中，尤其在数据驱动的界面设计中，jQuery模板能够极大地提升开发效率和代码可读性。jQuery库本身并不包含模板功能，但可以通过插件如jQuery Templates或Underscore.js的_.template方法来实现这一功能。 **...
18. **jQuery速成 - 替换，删除和复制** 掌握替换元素、删除元素和复制元素的技巧。 19. **jQuery速成 - 元素的赋值** 学习如何设置或获取元素的文本或HTML内容。 **第四章：样式篇 - 层叠样式表的处理** 20. **...
在网页设计中，动态效果是吸引用户注意力和提升用户体验的重要手段之一。"旋转木马效果"，也称为轮播图或滑动展示，是一种常见的网页元素，常用于展示多个图片或内容在一个有限的空间内循环播放。本教程将详细介绍...
在提供的代码片段中，可以看到两个函数：`doload1` 和 `doload2`，它们都使用了 jQuery 的 AJAX 方法来发送请求并处理返回的数据。 ##### 2.1 doload1 函数 ```javascript function doload1() { $.ajax({ url: ...
在网页开发中，交互性和用户体验是至关重要的元素，而jQuery库凭借其强大的功能和简洁的API，成为了实现这些目标的首选工具。本教程将深入探讨如何利用jQuery和HTML5创建一个点击展开的菜单列表项动画特效，帮助...
- **层次选择器**：通过层级关系来选取元素，如子元素选择器(`$("ul > li")`)、后代选择器(`$("ul li")`)等。 - **属性选择器**：根据元素的属性来选取元素，如`$("[href]")`选取所有带有`href`属性的元素。 ##### ...
尽管 `$.browser` 已经在 jQuery 新版本中弃用，但在旧版本中仍可使用，或者可以通过其他方式检测浏览器特性。 #### 八、如何使用 jQuery 替换一个元素 **知识点：** - **`.replaceWith()` 方法:** 用新内容替换...
4. **DOM操作**：`.append()`, `.prepend()`, 或 `.html()`等方法用于在页面上插入、替换或删除HTML元素，实现品牌列表的显示和隐藏。 对于有能力的开发者，这个代码提供了一个基础框架，可以进行二次修改和扩展，...
超实用的jquery代码段-jquery插入节点元素的方法 您好！您最喜欢的IT公司是: <ul> <li title="Google">Google</li> <li title="Apple">Apple</li> <li title="Microsoft">Microsoft</li> </ul> ...
例如，可以有一个`<ul>`元素用来存放图片`<li>`，还有一个`<div>`元素放置页码按钮。 2. **CSS样式**：对图片列表和分页导航进行样式设计，确保布局美观且易于使用。 3. **初始加载**：在页面加载时，使用jQuery...
- **DOM 操作**：jQuery 提供了如 `.append()`、`.prepend()`、`.before()` 和 `.after()` 等方法，用于插入、删除或替换 DOM 元素。 - **属性操作**：`.attr()` 和 `.removeAttr()` 可以获取或设置元素的属性。 ...
例如，`$("p").html("新的段落内容")`将替换所有段落元素内的文本，而`$("ul").append("<li>新项</li>")`则在无序列表末尾添加一个新的列表项。 **事件处理** jQuery简化了事件处理的绑定和解绑。使用`on()`、`off...
本文将深入解析jQuery中的事件方法和DOM操作，帮助开发者更好地理解和应用这些功能。 1. DOM操作 - `addClass()`: 这个方法用于向指定的元素添加CSS类。例如，`$("p").addClass("highlight")`会给所有`<p>`标签...