jQuery appendTo ( ) 方法

appendTo() 方法可用于在被选元素的末尾插入 HTML 元素。

语法格式：

$(element).appendTo(selector)

参数如下：

content：插入的内容，必须包含 HTML 标签。

selector：规定把内容添加至哪个元素的末尾。

注意：若 content 为页面中原本已经存在的元素，那么它将被从原来的位置移除，并在被选元素的结尾被插入。

示例：

（1）添加新的列表项

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="../jQuery/jQuery.js"></script><script>$(document).ready(function(){$("button").click(function(){$("<li>banana</li>").appendTo($(".list"));})})</script><style>.list li {width: 200px;height: 30px;line-height: 30px;  font-size: 16px;font-weight: 700;margin-bottom: 5px;background-color: rgba(9, 6, 163, 0.411);}</style>
</head>
<body><button>添加新的列表项</button><ul class="list"><li>apple</li></ul>
</body>
</html>

点击按钮，将添加新的列表项至列表的末尾，如图：

（2）添加页面中原本存在的元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="../jQuery/jQuery.js"></script><script>$(document).ready(function(){$("button").click(function(){$(".para").appendTo($(".box"));})})</script><style>.box {width: 200px;height: 200px;background-color: rgba(37, 204, 59, 0.486);}.para {width: 200px;height: 30px;line-height: 30px;background-color: rgba(118, 11, 218, 0.425);}</style>
</head>
<body><button>按钮</button><p class="para">这是一个段落。</p><div class="box"><p>普通段落。</p></div>
</html>

点击按钮，段落将被从原来的位置移除，并添加到盒子的末尾，如图：

jQuery appendTo ( ) 方法相关推荐

jQuery appendTo() 方法
用法:appendTo() 方法在被选元素的结尾插入 HTML 元素. $(content).appendTo(selector) 提示: content 必需.规定要插入的内容(必须包含 HTML ...
jQuery学习（七）— append方法与appendTo方法
jQuery学习(七)- append方法与appendTo方法一.append方法二.appendTo方法
关于JQuery中的appendTo方法
JQuery中的appendTo方法是会改变页面原有的结构,包括原从页面中取到结构的地方,比如如下代码(代码来自慕课网): <!DOCTYPE html> <html> < ...
jQuery中的append()和appendTo()方法
jQuery中的append()和appendTo()方法的效果不是简单的"插入"元素到指定位置,实际上是"移动"元素到指定位置. 参考jQuery API中的 ...
jQuery 事件方法大全
Dom : Attribute:$("p").addClass(css中定义的样式类型); 给某个元素添加样式$("img").attr({src:" ...
jQuery本身方法（$.each,$.map,$.contains,$ajax）
常用工具方法 (1)$.trim $.trim方法用于移除字符串头部和尾部多余的空格. $.trim(' Hello ') // Hello (2)$.contains $.contains方法返回一 ...
java appendto方法_jquery append与appendTo方法比较
jquery中append与appendTo方法区别 1. append(content)方法方法作用:向每个匹配的元素内部追加内容. 参数介绍:content (): 要追加到目标中的内容. 用法 ...
java appendto方法_jquery中append()与appendto()用法分析
本文实例分析了jquery中append()与appendto()的用法.分享给大家供大家参考.具体分析如下: 在jQuery的文档操作方法中,append()和appentto()方法执行的任务相同 ...
java appendto方法_jQuery中appendTo()方法用法实例
本文实例讲述了jQuery中appendTo()方法用法.分享给大家供大家参考.具体分析如下: 此方法把匹配的元素插入指定元素结尾,插入位置在元素的内部. appendTo()方法的作用和append ...

jQuery appendTo ( ) 方法

jQuery appendTo ( ) 方法相关推荐

最新文章

热门文章