jquery之添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

append():

<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" 追加文本。");
  });

  $("#btn2").click(function(){
    $("ol").append("
  • 追加列表项
  • "
    ); }); }); </script> </head> <body> <p>这是一个段落。</p> <p>这是另外一个段落。</p> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> <button id="btn1">添加文本</button> <button id="btn2">添加列表项</button> </body>

    jquery之添加元素_第1张图片

    prepend() 方法在被选元素的开头插入内容,与append()基本一致

    after():

    function afterText()
    {
        var txt1="I ";                    // 使用 HTML 创建元素
        var txt2=$("").text("love ");     // 使用 jQuery 创建元素
        var txt3=document.createElement("big");  // 使用 DOM 创建元素
        txt3.innerHTML="jQuery!";
        $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
    }
    

    before() 在被选元素之前插入内容,与after()基本一致

    你可能感兴趣的:(jquery之添加元素)