jquery插入元素:append、prepend、after、before

各种插入的区分:
首先有一个div,里面有文字

<style>
        .myDiv{
            width: 100px;
            height: 100px;
            margin:20px;
            background-color: red;
        }
</style>
<div class="myDiv">哈哈</div>

image.png

append

var html='<span class="ele">追加的元素</span>';
$(".myDiv").append(html);

结果:


image.png

prepend

$(".myDiv").prepend(html);

结果:


image.png

after

$(".myDiv").after(html);

结果:在元素之后加入


image.png

before

$(".myDiv").before(html);

结果:在元素之前加入


image.png

prependTo,appendTo,insertAfter,insertBefore本人不爱用~ 道理都是一样滴~

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

推荐阅读更多精彩内容

  • DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作。但实际上...
    阿r阿r阅读 1,050评论 0 9
  • 第1章 简介 第2章 DOM节点的创建 2-1 DOM创建节点及节点属性 通过JavaScript可以很方便的获...
    mo默22阅读 852评论 0 8
  • 1:jQuery节点创建与属性的处理 创建元素节点:可以有几种方式,后面会慢慢接触。常见的就是直接把这个节点的结构...
    码农小杨阅读 633评论 0 1
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,506评论 0 44
  • http://www.imooc.com/static/lib/jquery/1.9.1/jquery.js js...
    再见理想冷雨夜阅读 498评论 0 1