.append()

.append(content[,content])

描述: 在每个匹配元素里面的末尾处插入参数内容。

content

类型:String, Element, jQuery

DOM 元素，DOM元素数组，HTML字符串，或者jQuery对象，用来插在每个匹配元素里面的末尾。
content

类型:String, Element, Array, jQuery

一个或多个DOM元素，元素数组，HTML字符串，或jQuery对象插入到每个匹配元素的末尾。

.append(function(index,html))

function(index, html)

类型:Function()

一个返回HTML字符串，DOM元素，jQuery对象的函数，该字符串用来插入到匹配元素的末尾。接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容。在函数中this指向元素集合中的当前元素

.append()函数将特定内容插入到每个匹配元素里面的最后面，作为它的最后一个子元素（last child）, (如果要作为第一个子元素（first child）, 用.prepend()).

.append() 和.appendTo()实现同样的功能。主要的不同是语法——内容和目标的位置不同。对于.append(), 选择器表达式在函数的前面，参数是将要插入的内容。对于.appendTo()刚好相反，内容在方法前面，无论是一个选择器表达式或创建作为标记上的标记，它都将被插入到目标容器的末尾。

例子:

Example: 在所有的段落内的尾部，追加一些 HTML。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-1.10.2.js"></script><style>p { background:yellow; }
</style>
</head><body>
<p>测试append：</p>
<script>$("p").append("<strong>用append添加的文本！</strong>");
</script>
</body>
</html>

效果图：

Example: 在所有的段落内的尾部，追加一个元素。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-1.10.2.js"></script><style>p { background:yellow; }
</style>
</head><body>
<p>测试append：</p>
<script>$("p").append(document.createTextNode("用document.createTextNode追加的元素！"));
</script>
</body>
</html>

效果图：

Example: 在所有的段落内的尾部，追加一个 jQuery 对象（类似于一个 DOM 元素数组）。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-1.10.2.js"></script><style>p { background:yellow; }
</style>
</head><body><strong>用jquery对象追加的</strong>
<p>测试append：</p>
<script>
$("p").append( $("strong") );
</script>
</body>
</html>

jQuery API .append()相关推荐

jquery API
jQuery API Documentation详细的API和例子说明,请参考文档:http://docs.jquery.com/Main_Page百度百科的解析:http://baike.baidu ...
Jquery对象和DOM对象---Jquery API (1)
文/饥人谷_韩宝亿(简书作者) 原文链接:http://www.jianshu.com/p/98a0c82c47e4 著作权归作者所有,转载请联系作者获得授权,并标注"简书作者". ...
jquery after append appendTo三个函数的区别
jq文档的说明是 1.after函数定义和用法: after() 方法在被选元素后插入指定的内容. 语法: $(selector).after(content) 实例: <html> & ...
jQuery中append、insertBefore、after与insertAfter方法注意事项
jQuery中append.appendTo.prepend.prependTo.before.insertBefore.after与insertAfter方法注意事项这里列的是针对初学jQuery ...
jQuery API 3.1.0 速查表-打印版
jQuery API 3.1.0 速查表-打印图,(API来自:http://jquery.cuishifeng.cn/index.html) 转载于:https://www.cnblogs.com/ ...
JQuery之append和appendTo的区别，还有js中的appendChild用法
JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择 ...
jQuery中append()和appendTo()的区别
[前言] 简单总结下jQuery中append()和appendTo()的区别 [主体] 1.简单理解 (插入对象不同) append()前面是被插入的对象,后面是要在对象内插入的元素内容 appen ...
jquery的append方法无效
css代码: AAAA BBBB(title="hello") CCCC(class="box") DDDD(title="hello") ...
JQuery获取append后的动态元素：live()和on()
2019独角兽企业重金招聘Python工程师标准>>> jquery通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素) $(&qu ...

jQuery API .append()

.append()

例子:

Example: 在所有的段落内的尾部，追加一些 HTML。

Example: 在所有的段落内的尾部，追加一个元素。

Example: 在所有的段落内的尾部，追加一个 jQuery 对象（类似于一个 DOM 元素数组）。

jQuery API .append()相关推荐

最新文章

热门文章