菜单

jQuery学习之DOM节点的插入方法计算,jquerydom节点插入

2019年6月22日 - JavaScript

本文主要总括了jQuery中DOM节点的插入方法,以及各个方法的注意点,上边话没有多少说,来看看详细的牵线吧。

jQuery学习之DOM节点的插入方法计算,jquerydom节点插入

正文主要总结了jQuery中DOM节点的插入方法,以及各个措施的注意点,上边话非常少说,来探望详细的介绍吧。

一、内部插入append()与appendTo()

append()appendTo()二种艺术效果雷同,重要的不如是语法——内容和指标的职位差异,append()眼下是要选择的对象,前边是要在目的内插入的要素内容,appendTo()近日是要插入的因素内容,而背后是要选择的目的。

   $("#bt1").on('click', function() {
 //.append(), 选择表达式在函数的前面,
 //参数是将要插入的内容。
 $(".content").append('<div class="append">通过append方法添加的元素</div>')
 })

 $("#bt2").on('click', function() {
 //.appendTo()刚好相反,内容在方法前面,
 //无论是一个选择器表达式 或创建作为标记上的标记
 //它都将被插入到目标容器的末尾。
 $('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))
 })

二、内部插入prepend()与prependTo()

在要素内部进行操作的点子,除了在被选成分的末段(依然在内部)通过append与appendTo插入内定内容外,相应的还是可以够在被选成分从前插入,jQuery提供的章程是prepend与prependTo

$("#bt1").on('click', function() {
 //找到class="aaron1"的div节点,然后通过prepend在内部的首位置添加一个新的p节点
 $('.aaron1').prepend('<p>prepend增加的p元素</p>')
 })
 $("#bt2").on('click', function() {
 //找到class="aaron2"的div节点,然后通过prependTo内部的首位置添加一个新的p节点
 $('<p>prependTo增加的p元素</p>').prependTo($('.aaron2'))
 })

这里总括下里面操作七个点子的界别:

三、外界插入after()与before()

节点与节点以前有种种关系,除了父亲和儿子,祖辈关系,还能是弟兄关系。在此以前大家在管理节点插入的时候,接触到了里面插入的多少个方法,那节咱们初始讲外界插入的管理,也便是手足之间的涉及管理,这里jQuery引进了2个点子,能够用来在相配I的要素前后插入内容。

注意点:

after向成分的背后增添html代码,如果成分后边有成分了,那将前边的要素后移,然后将html代码插入,before向成分的前方加多html代码,假如成分前边有成分了,那将日前的因素前移,然后将html代码插。

$("#bt1").on('click', function() {
 //在匹配test1元素集合中的每个元素前面插入p元素
 $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')
 })
$("#bt2").on('click', function() {
 //在匹配test1元素集合中的每个元素后面插入p元素
 $(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')
})

四、外界插入insertAfter()与insertBefore()

与中间插入管理同样,jQuery由于内容指标的地方分化,然扩张了2个新的点子insertAfter与insertBefore

注意事项:

$("#bt1").on('click', function() {
 //在test1元素前后插入集合中每个匹配的元素,不支持多参数
 $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))
})

$("#bt2").on('click', function() {
 //在test2元素前后插入集合中每个匹配的元素,不支持多参数
 $('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))
})

总结

如上就是那篇小说的全体内容了,希望本文的原委对大家的上学恐怕干活能推动一定的提携,假使有疑难我们可以留言沟通。

http://www.bkjia.com/Javascript/1190083.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1190083.htmlTechArticlejQuery学习之DOM节点的插入方法总结,jquerydom节点插入
本文主要计算了jQuery中DOM节点的插入方法,以及各类格局的注意点,上面话十分少说,来…

一、内部插入append()与appendTo()

append()appendTo()三种办法效果雷同,主要的不及是语法——内容和目标的任务差别,append()眼下是要接纳的指标,前边是要在目的内插入的成分内容,appendTo()前方是要插入的成分内容,而前面是要挑选的对象。

   $("#bt1").on('click', function() {
 //.append(), 选择表达式在函数的前面,
 //参数是将要插入的内容。
 $(".content").append('<div class="append">通过append方法添加的元素</div>')
 })

 $("#bt2").on('click', function() {
 //.appendTo()刚好相反,内容在方法前面,
 //无论是一个选择器表达式 或创建作为标记上的标记
 //它都将被插入到目标容器的末尾。
 $('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))
 })

二、内部插入prepend()与prependTo()

在要素内部实行操作的主意,除了在被选成分的末段(仍旧在中间)通过append与appendTo插入内定内容外,相应的还足以在被选成分在此以前插入,jQuery提供的措施是prepend与prependTo

$("#bt1").on('click', function() {
 //找到class="aaron1"的div节点,然后通过prepend在内部的首位置添加一个新的p节点
 $('.aaron1').prepend('<p>prepend增加的p元素</p>')
 })
 $("#bt2").on('click', function() {
 //找到class="aaron2"的div节点,然后通过prependTo内部的首位置添加一个新的p节点
 $('<p>prependTo增加的p元素</p>').prependTo($('.aaron2'))
 })

这边总计下里面操作四个格局的界别:

三、外界插入after()与before()

节点与节点此前有各类关系,除了父亲和儿子,祖辈关系,还足以是弟兄关系。以前大家在拍卖节点插入的时候,接触到了个中插入的多少个法子,那节我们起先讲外部插入的管理,也便是手足之间的涉及管理,这里jQuery引进了2个艺术,能够用来在相配I的成分前后插入内容。

注意点:

after向元素的末尾增多html代码,若是成分后边有成分了,这将后边的要素后移,然后将html代码插入,before向元素的前面加多html代码,假设成分前边有成分了,那将前方的成分前移,然后将html代码插。

$("#bt1").on('click', function() {
 //在匹配test1元素集合中的每个元素前面插入p元素
 $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')
 })
$("#bt2").on('click', function() {
 //在匹配test1元素集合中的每个元素后面插入p元素
 $(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')
})

四、外界插入insertAfter()与insertBefore()

与其间插入管理同样,jQuery由于内容目的的职分不相同,然扩张了2个新的不二等秘书诀insertAfter与insertBefore

注意事项:

$("#bt1").on('click', function() {
 //在test1元素前后插入集合中每个匹配的元素,不支持多参数
 $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))
})

$("#bt2").on('click', function() {
 //在test2元素前后插入集合中每个匹配的元素,不支持多参数
 $('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))
})

总结

以上正是那篇小说的全体内容了,希望本文的源委对我们的上学恐怕专门的学业能带来一定的扶植,假设有疑点大家能够留言交换。

您或然感兴趣的文章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图