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>

秒客网

jQuery添加和删除元素

添加新的 HTML 内容

相关文章