jQuery添加和删除元素

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法:

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容
     <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    var i = 0;
    $("#btn1").click(function(){
    i ++ ;
    $("p").append("<b>" + i + "</b>" + " ");
    }); $("#btn2").click(function(){
    $("ol").append("<li>添加列表</li>");
    });
    });
    </script>
    </head> <body>
    <p>Number:</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>
    <hr>
    <button onclick="appendText()">追加文本</button>
    </body> <script>
    function appendText(){
    var txt1="<b>文本------</b>"; // 使用 HTML 标签创建文本
    var txt2=$("<u></u>").text("文本-----"); // 使用 jQuery 创建文本
    var txt3=document.createElement("i");
    txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3); // 追加新元素
    }
    </script>
    </html>
上一篇:nginx基于IP的虚拟主机


下一篇:大数据时代的Python金融应用-Day1-Python与金融应用概述