13-插入元素-内部插入

jQuery 插入元素

内部插入

append()方法

语法格式

  • append(内容)
  • Append(function(index,html))

该方法在匹配元素集合的每个元素末尾插入由参数指定的内容并返回jQuery对象。

html

<button>按钮</button>     
<div class="b">
    <h2>this 我是h2</h2>
</div>

js

$(function(){
    $("button").click(function(){
        $("div").append("<h1>this is H1</h1>");
    })
})

单击完按钮得到的html结构

<button>按钮</button>     
<div class="b">
    <h2>this 我是h2</h2>
    <h1>this is H1</h1>
</div>

prepend()方法

语法格式

  • prepend(内容)

此方法将参数指定的内容插入匹配元素集合中每个元素的开头并返回jQuery对象。

html

<button>按钮</button>     
<div class="b">
    <h2>this 我是h2</h2>
</div>
<div class="c">
    <h2>this c 里面的h2</h2>
</div>

js

$(function(){
    $("button").click(function(){
        $("div").prepend("<h1>this is H1</h1>");
    })
})

单击完按钮得到的html结构

<button>按钮</button>     
<div class="b">
    <h1>this is H1</h1>
    <h2>this 我是h2</h2>
</div>
<div class="c">
    j<h1>this is H1</h1>
    <h2>this c 里面的h2</h2>
</div>

prependTo()方法

语法格式

  • prependTo(target)

此方法将匹配元素集合中的每个元素插入目标元素的开头并返回jQuery对象。

html

<button>按钮</button>     
<div class="b">
    <h2>this 我是h2</h2>
</div>

js

$(function(){
    $("button").click(function(){
        $("<p>我要上天</p>").prependTo($("div"));
    })
})

单击完按钮得到的html结构

<button>按钮</button>     
<div class="b">
    <p>我要上天</p>
    <h2>this 我是h2</h2>
</div>


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 670评论 0 3
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,466评论 0 44
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,681评论 18 503
  • JQuery干货篇之插入元素 本次使用的html,css还是我上一篇的源代码,详情请看上一篇文章 分类 插入子元素...
    爱撒谎的男孩阅读 689评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,200评论 0 1