关于JQuery中的appendTo方法

JQuery中的appendTo方法是会改变页面原有的结构，包括原从页面中取到结构的地方，比如如下代码（代码来自慕课网）：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><style>.left {width: auto;height: 150px;}.left div {width: 150px;height: 120px;padding: 5px;margin: 5px;float: left;background: #bbffaa;border: 1px solid #ccc;}</style><script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head><body><h2>add方法()</h2><div class="left first-div"><div class="div"><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li></ul><p>新的p元素</p></div></div><div class="right"></div><br/><button>点击：add传递元素标签</button><button>点击：add传递html结构</button><script type="text/javascript">$("button:first").click(function() {//把p元素添加到li的合集中$('li').add('p').css('background', 'red')})</script><script type="text/javascript">$("button:last").click(function() {//把html结构'<p>新的p元素</p>'//加入到li的合集中，为了能够在页面上显示//需要再重新appendTo到指定的节点处//值得注意：整个结构位置都改变了$('li').add('<p>新的p元素</p>').appendTo($('.right'))})</script>
</body>
</html>

该代码使用了appendTo()方法：

$('li').add('<p>新的p元素</p>').appendTo($('.right')

将取到的的所有li元素放到right类下的结构里，结果是，原来含有的p元素的结构里，p元素全部不见了，全部都移到right类下的结构里了，如图：
执行代码前：

执行代码后：

因此appendTo改变了整个HTML文件的结构。

关于JQuery中的appendTo方法相关推荐

用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
jQuery中animate( )的方法及$(“body“).animate({‘scrollTop‘:top},500)不被Firefox支持问题的解决
jQuery中animate( )的方法及$("body").animate({'scrollTop':top},500)不被Firefox支持问题的解决参考文章: (1)jQu ...
jquery中的map()方法与js中的map()方法
1.jquery中的map()方法首先看一个简单的实例: $("p").append( $("input").map(function(){ return $ ...
jQuery 中的 end 方法
如有错误,欢迎批评指正! jQuery 中的 end 方法,我从 stackoverflow 上的一个回答开始讲: 原文链接: What does the .end() function do in ...
原生JS中的三大家族（offset/scroll/client）与jQuery中对应的方法
JS中的offset家族: 一.offsetEWidth与offsetHeight: 获取的是元素的实际宽高 = width + border + padding 注意点: 1.可以获取行内及内嵌的宽 ...
ajax远程调用,jquery中的ajax方法怎样通过JSONP进行远程调用
关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用首先介绍下$.ajax的参数 type:请求方式 GET/ ...
JQuery中ajax,get方法在asmx中的使用
喜大普奔,今天终于完成了一个月前就想完成的一个代码实现.就是在点击一个按钮后禁用按钮,弹出正在操作的提示框,执行完事件后再启用按钮. 以前的想法是Ajax和aspx联用,这样,省页面,也不用对后台代码 ...
js中的onclick事件和JQuery中的click方法以及on方法事件用法总结
1.onclick是绑定的事件(它是一个事件),注意该事件绑定只是JacaScript中有(js中的),Jquery中并没有此事件,告诉浏览器在鼠标点击时候要做什么 2.click方法(jquery中 ...
jQuery 中的 get() 方法
jQuery 中的 get() 方法开发工具与关键技术:Microsoft Visual Studio,jQuery知识作者:张智鹏撰写时间:2020 年 8 月 17 日在 jQuery 中 ...

关于JQuery中的appendTo方法

关于JQuery中的appendTo方法相关推荐

最新文章

热门文章