`

append、appendTo的使用方式

阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<html>

  <head>

    <title>append</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="jquery-1.7.1.js"></script>

<script type="text/javascript">

$(function() {

$('div').append(function(index, html) {

//index即选择器的索引

if(index == 1) {

//返回的内容即是在相应索引下的对象内部(最后)添加的内容

return '<strong>world</strong>';

}

if(index == 3) {

return 'morning';

}

});

//在每个匹配的选择器内部(最后)添加内容

$('.next').append('<strong>morning</strong>.');

//把每个匹配的元素添加的每个选择器内部

$('.foo').appendTo('p');

//还有一些相近的方法prependTo, insertBefore, insertAfter, 和 replaceAll,使用方式都差不多

});

</script>

  </head>

  

  <body>

    <div style="border: 1px solid red;width: 80px;height: 30px;">hello</div>

    <div style="border: 1px solid green;width: 80px;height: 30px;"></div>

    

    <div style="border: 1px solid red;width: 80px;height: 30px;">good</div>

    <div style="border: 1px solid green;width: 80px;height: 30px;"></div>

    

    <div class="next" style="border: 1px solid red;height: 30px;">He loafed away the whole </div>

    <div class="next" style="border: 1px solid red;height: 30px;">He loafed away the whole </div>

    

    <div class="foo">Hello</div>

    <div class="foo">Hey</div>

    <p>I would like to say: </p>

    <p>I would like to say: </p>

    

  </body>

</html>

 

分享到:
评论

相关推荐

    append和appendTo的区别以及appendChild用法

    append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的对象 实例: $(‘#a’).append(‘content’); $(‘&lt;div&gt;content’).appendTo($(‘#...

    jquery append与appendTo方法比较

    jquery中append与appendTo方法区别 1. append(content)方法 方法作用:向每个匹配的元素内部追加内容。 参数介绍:content (): 要追加到目标中的内容。 用法示例: HTML代码为&lt;p&gt;I come from &lt;/p&gt;&lt;p&gt;I love  向...

    jquery中append()与appendto()用法分析

    本文实例分析了jquery中append()与appendto()的用法。分享给大家供大家参考。具体分析如下: 在jQuery的文档操作方法中,append()和appentto()方法执行的任务相同,但是两者也有区别。 1、append()方法:在被选元素...

    节点的插入之append()和appendTo()的用法介绍

    说到节点的插入想必大家对append()和appendTo()的用法并不陌生吧,下面有个不错的是,希望对大家学习有所帮助

    jQuery中appendTo()方法用法实例

    appendTo()方法的作用和append()方法是相同的,但是语法是不同的,尽管形式一样。 语法结构: 代码如下:$(selector).appendTo(content) 参数列表: 参数 描述 selector 要被插入的匹配元素。 content 要被...

    jQuery中append、insertBefore、after与insertAfter方法注意事项

    jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项

    react-append-to-body:React高阶组件,使您可以将组件附加到主应用之外的DOM

    安装npm i react-append-to-body --save用import { componentWillAppendToBody } from "react-append-to-body" ;/* Some component that you want to attach to the DOM */function MyComponent ( { children } ) { ...

    jQuery动态加载css文件实现方法

    有时我们可能会需要使用 jQuery 来加载一个外部的 css 文件,如在切换...有些朋友可能会使用下边的写法,只是形式有些小差异(append appendTo),原理还是一样的。 $("head").append("&lt;link&gt;"); css = $("head

    jQuery学习之DOM节点的插入方法总结

    appendTo:实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。 append()和appendTo()两种方法功能相同,主要的不同是语法——内容和目标的位置不同,append()前面是...

    日期时间空间

    this.title.append($("该日暂无推荐时段内的工作时间&lt;/td&gt;")); var morningTd=this.timeRow.clone(); morningTd.appendTo(this.content); }else{ if(map.get("morning").length&gt;0){ this.title.append($("上午...

    jQuery点击图片相册掀开切换效果.zip

    $(this).addClass("zoom").fadeOut(700,append); function append(){ $(this).removeClass("zoom").appendTo(".container").show(); var name = $(".container").children("img").first().attr(...

    eLis:用于轻松创建元素的微型 JavaScript 库

    Append : eLis.mainEl 缓存: eLis.list({}).next({appendTo: eLis.mainEl}).append("body") 保存: eLis.list({}).next({}).save(true || false) 销毁: eLis.list({}).next({}).destroyEl() 遍历子元素: ...

    jQuery和JavaScript节点插入元素的方法对比

    如$(A).append(B)与$(B).appendto(A)是等价的 prepend() 向每个匹配的元素内部前置内容 prependTo() 把所有匹配的元素前置到另一个指定的元素集合中。实际上是颠倒了preprend()的用法。如$(A).pr

    jQuery中DOM树操作之使用反向插入方法实例分析

    本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在...

    【JavaScript源代码】jQuery实现动态向上滚动.docx

    jQuery实现动态向上滚动  本文实例为大家分享了jQuery... 而循环的实现:appendTo()或者append,三目运算符(或者 if else),insertBefore()或者prepend()等等好多种方法。 代码: &lt;!doctype html&gt;  &lt;html&gt;  &lt;

Global site tag (gtag.js) - Google Analytics