本文主要是介绍jq中 html append appendto,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
jq操作html页面常用的有哪些方法:
- html方法,给元素添加html代码或者清空html代码(参数为空字符串);
- append向元素的末尾添加html代码;
- appendTo这个方法跟append方法的很像,只是要添加的html代码的目标有所不一样;
- after向元素的后边添加html代码,如果元素后面有元素了,那将后面的元素后移,然后将html代码插入;
- before向元素的前边添加html代码,如果元素前面有元素了,那将前面的元素前移,然后将html代码插入;
- insertAfter将JQuery封装好的元素插入到指定元素的后面,如果元素后面有元素了,那将后面的元素后移,然后将JQuery对象插入;
- insertBefore将JQuery封装好的元素插入到指定元素的前面,如果元素前面有元素了,那将前面的元素前移,然后将JQuery对象插入;
- empty清空元素内部的html代码,它只是清空内部的html代码,但是标记仍然留在DOM中;
- remove从DOM中移除整个元素;
需要指出的重要的一点:JQuery会自动的完善html代码,也就是说,假如你要执行以下操作
那么实际插入到标记中的html代码是
这一点需要特别注意,很多教程之类的只是讲解这些函数的动作,但是会忽略一些细节;
下面让我来详细解释一下每个函数的作用以及它是如何工作的,会产生什么效果。以后的代码我都对这样的一个模板来操作,代码以及效果如下:
原始的效果图:
一、html函数的使用
我们执行以下语句:
效果图如下:
再来看看最终的代码:
这里是完整的html代码,也就是说JQuery为我们补全了代码,这一点需要注意,JQuery为我们带来了方便,但是当我们需要精确控制html代码的时候,需要注意一点。
html函数的作用原理首先是移除目标元素内部的html代码,然后将新代码添加到目标元素。
二、append、appendTo函数的使用
执行以下语句:
注:为了编程规范,html代码我之后都使用完整的html标记。
效果图如下:
最终的代码:
append函数将html附加到了<span>middle</span>之后。
appendTo函数的效果和append一样,只不过是写法不一样:
appendTo首先将html代码封装成jquery对象,然后添加到指定的目标位置。
三、after、insertAfter函数的使用
执行以下语句:
效果图:
after函数的作用是将html代码插入指定元素的后面,如果后面有元素,则将其后移,然后插入html代码。
insertAfter函数与after函数的作用是一样的,上面代码的insertAfter版本为:
四、before、insertBefore函数的使用
这连个函数的原理与after、insertAfter是一样的,只不过before、insertBefore是插入到目标元素的前面,大家可以自行参考after、insertAfter。
五、empty、remove函数的使用
执行以下代码:
效果图:
再来看看最终的html代码:
里面的html代码被清空了,然而元素本身还在。
执行以下语句:
效果图:
最终的html代码:
中间的元素整个被删除了,也就是说remove方法将目标元素整个的从DOM中移除
注:
- $('#middle').html('<div class="child">html()'); .html方法和.append等方法中单引号和双引号要去别开 不然会报错 ,同时要是含有特殊字符要用\进行转义
这篇关于jq中 html append appendto的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!