11.jquery DOM操作添加和删除

来源：互联网发布：发票自动读取数据编辑：程序博客网时间：2024/09/21 09:06
<!DOCTYPE html><html>    <!--        添加            append() - 在被选元素的结尾插入内容            prepend() - 在被选元素的开头插入内容            after() - 在被选元素之后插入内容            before() - 在被选元素之前插入内容        删除            remove() - 删除被选元素（及其子元素）            empty() - 从被选元素中删除子元素    -->    <head>        <meta charset="UTF-8">        <title>jquery DOM操作 添加和删除</title>        <script src="js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">            $("document").ready(function() {                $("#btn1").click(function() {                    $("p").append(" <b>Appended text</b>.");                });                $("#btn2").click(function() {                    $("ol").append("<li>Appended item</li>");                });                $("#btn3").click(function() {                    $("p").prepend("<b>Prepended text</b>. ");                });                $("#btn4").click(function() {                    $("ol").prepend("<li>Prepended item</li>");                });                $("#btn5").click(function() {                    var text1 = "<p>Text</p>"; //html文本创建                    var text2 = $("<p></p>").text("Text"); //jquery创建                    var text3 = document.createElement("p"); //javascript DOM方式创建                    text3.innerHTML = "Text";                    $("#p1").append(text1, text2, text3); //追加新元素                });            });        </script>    </head>    <body>        <h1>append和prepend</h1>        <p>This is a paragraph.</p>        <p>This is another paragraph.</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>        <br /><br />        <button id="btn3">添加文本(前)</button>        <button id="btn4">添加列表项(后)</button>        <hr/>        <h1>append和prepend方法可以接受无限个参数，参数元素可以是html文本，可以是jquery创建的，也可以是javascript DOM创建的</h1>        <p id="p1">This is a paragraph.</p>        <button id="btn5">追加文本</button>        <hr/>    </body></html>
0 0
11.jquery DOM操作 添加和删除

11.jquery DOM操作添加和删除
