节点的插入之append()和appendTo()的用法介绍

代码如下:

<!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>jquery</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//append()的用法
//$("ul").append("<li title='abc'>hello</li>");
//$("ul").append("<li title='xyz'>world</li>");
//appendTo()的用法
$("<li title='xyz'>hello</li>").appendTo($("ul"));
});
</script>
</head>
<body>
<p title="hello world">您认为圣思园培训好不好呢?</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
</body>

</html>

在已有的节点上操作


代码如下:

<!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>jquery4</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
var li1 = $("<li title='abc'>hello</li>");
var li2 = $("<li title='abc'>world</li>");
var li3 = $("<li title='abc'>hello world</li>");
$("ul").append(li1);
$("ul").prepend(li2);
$("ul li:eq(4)").after(li3);

});
</script>
</head>
<body>
<p title="hello world">您认为圣思园培训好不好呢?</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述了</li>
</ul>
</body>
</html>

(0)

相关推荐

  • 节点的插入之append()和appendTo()的用法介绍

    复制代码 代码如下: <!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"

  • jquery中append()与appendto()用法分析

    本文实例分析了jquery中append()与appendto()的用法.分享给大家供大家参考.具体分析如下: 在jQuery的文档操作方法中,append()和appentto()方法执行的任务相同,但是两者也有区别. 1.append()方法:在被选元素的结尾(但仍在元素内部)插入指定的内容. a.语法: 复制代码 代码如下: $(selector).append(content); 其中,参数content是必需的,指定要附加的内容. b.append能够使用函数给被选元素附加内容,语法为

  • jQuery学习之DOM节点的插入方法总结

    本文主要总结了jQuery中DOM节点的插入方法,以及各种方法的注意点,下面话不多说,来看看详细的介绍吧. 一.内部插入append()与appendTo() append:这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的情况类似. appendTo:实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中. append()和appendTo()两种方法功能相同,主要的不同是语法--内容和目标的位置不同,ap

  • append和appendTo的区别以及appendChild用法

    append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的对象 实例: $('#a').append('content'); $('<div>content</div>').appendTo($('#a')); 注意appendTo前面一定要是Jquery对象. appendChild(Node)这个 方法一般是在指定元素节点的最后一个子节点之后添加节点 但如果Node是页面中的DOM对象,那

  • jquery append与appendTo方法比较

    jquery中append与appendTo方法区别 1. append(content)方法 方法作用:向每个匹配的元素内部追加内容. 参数介绍:content (<Content>): 要追加到目标中的内容. 用法示例: HTML代码为<p>I come from </p><p>I love  </p> 向所有p标签中追加一个单词china,则写法为 $("p").append("china"); 结果

  • jQuery中appendTo()方法用法实例

    本文实例讲述了jQuery中appendTo()方法用法.分享给大家供大家参考.具体分析如下: 此方法把匹配的元素插入指定元素结尾,插入位置在元素的内部. appendTo()方法的作用和append()方法是相同的,但是语法是不同的,尽管形式一样. 语法结构: 复制代码 代码如下: $(selector).appendTo(content) 参数列表: 参数 描述 selector 要被插入的匹配元素. content 要被插入匹配元素的元素. 实例代码: 复制代码 代码如下: <!DOCTY

  • 对C++ string append方法的常用用法详解

    C++ string append()添加文本 使用append()添加文本常用方法: 直接添加另一个完整的字符串: 如str1.append(str2); 添加另一个字符串的某一段子串: 如str1.append(str2, 11, 7); 添加几个相同的字符: 如str1.append(5, '.'); 注意,个数在前字符在后.上面的代码意思为在str1后面添加5个".". //======================================== #include<

  • Python.append()与Python.expand()用法详解

    如下所示: alist=[1,2]] >>>[1,2] alist.append([3,4]) >>>[1, 2, [3, 4]] alist.extend([3,4]) >>>[1, 2, 3, 4] 结论: list.apend(arg1) 参数类型任意,可以往已有列表中添加元素,若添加的是列表,就该列表被当成一个元素存在原列表中,只使list长度增加1. list.extend(list1) 参数必须是列表类型,可以将参数中的列表合并到原列表的末

  • mybatis foreach批量插入数据:Oracle与MySQL区别介绍

    下面给大家介绍mybatis foreach批量插入数据:Oracle与MySQL不同点: •主要不同点在于foreach标签内separator属性的设置问题: •separator设置为","分割时,最终拼接的代码形式为:insert into table_name (a,b,c) values (v1,v2,v3) ,(v4,v5,v6) ,... •separator设置为"union all"分割时,最终拼接的代码形式为:insert into table

  • python3解析库pyquery的深入讲解

    前言 pyquery是一个类似jquery的python库,它实现能够在xml文档中进行jQuery查询,pyquery使用lxml解析器进行快速在xml和html文档上操作,它提供了和jQuery类似的语法来解析HTML文档,支持CSS选择器,使用非常方便 1.pyquery安装 pip方式安装: $pip install pyquery #它依赖cssselect和lxml包 pyquery==1.4.0 - cssselect [required: >0.7.9, installed: 1

随机推荐