5-2追加元素的方式·

追加元素的方法
append() 方法用来在元素的末尾追加元素(最后一个子节点)。增加元素末尾(儿子)
prepend()在元素的开始添加元素(第一个子节点)。增加元素开始( 儿子)
appendTo() 主动添加,append()被动添加
prependTo() 主动添加,append()被动添加

after() 在元素之后添加元素(添加兄弟)增加元素后面( 兄弟)
before() 在元素之前添加元素(添加兄弟)增加元素前面( 兄弟)

// 页面加载事件
$(function () {
    // 为按钮注册事件
    var i = 0;
    $('#btn').click(function () {
        // 创建元素
        var element = $('<a href="#" target="_blank">百度一下'+(++i)+'</a>');
        // 追加元素
        //------------append()------------
        $('#box').append(element);
        百度一下1 百度一下2

        //------------appendTo()-----------
        element.appendTo($('#box'));
        百度一下1 百度一下2

        //------------prepend()-----------
        $('#box').prepend(element);
        百度一下2 百度一下1 
        //------------after()------------
        $('#box').after(element);
        百度一下2 百度一下1

        //------------before()-------------
        $('#box').before(element);  
        百度一下1 百度一下2 
    }); 
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1:jQuery节点创建与属性的处理 创建元素节点:可以有几种方式,后面会慢慢接触。常见的就是直接把这个节点的结构...
    码农小杨阅读 3,736评论 0 1
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 8,796评论 0 44
  • DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作。但实际上...
    阿r阿r阅读 4,617评论 0 9
  • 第1章 简介 第2章 DOM节点的创建 2-1 DOM创建节点及节点属性 通过JavaScript可以很方便的获...
    mo默22阅读 4,276评论 0 8
  • 创建 $('body').append($(" ")) //向body 中插入一个 div 插入 append:...
    学开船不会开船阅读 1,768评论 0 1