我的第十四课：jQuery - 添加元素-CSDN博客

本文链接：https://blog.csdn.net/meiyouyimingtian/article/details/20633081

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

代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
    <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
    <script type="text/javascript">
       function appendText(){
           var test1="<p>Text.</p>";//html创建新元素
           var test2=$("<p></p>").text("Text.");//jquery创建新元素
           var test3=document.createElement("p");//通过dom来创建文本
           test3.innerHTML="Text.";
           $("body").append(test1,test2,test3);//追加新元素

       }
      function afterText(){
            var text1="<b>I</b>";
            var text2=$("<i></i>").text("hete.");
            var text3=document.createElement();
            text3.innerHTML="you.";
            $("img").after(text1,text2,text3);

      }

        $(document).ready(
           function(){
              $("#btn1").click(
                  function(){
                     $("p").append("<b>Append text</b>");
                  }
              );

              $("#btn2").click(
                  function(){
                     $("ol").append("<li>Append text</li>");
                  }
              );
              $("#btn3").click(
                  function(){
                     $("p").prepend("<b>Append text</b>");
                  }
              );

              $("#btn4").click(
                  function(){
                     $("ol").prepend("<li>Append text</li>");
                  }
              );
             $("#btn5").click(
                function(){
                   $("img").before("<b>append<b>");
                }
             );

              $("#btn6").click(
                function(){
                   $("img").after("<b>append<b>");
                }
             );
           }
        );

    </script>
</head>

<body>
      <p>第一段</p>
      <p>第二段</p>
      <ol>
        <li>标题一</li>
        <li>标题二</li>
        <li>标题三</li>
      </ol>
      <img alt="" src="image/1.jpg"/>
      <button id="btn1">追加文本</button>
      <button id="btn2">追加列项表</button>
       <button id="btn3">前面追加文本</button>
      <button id="btn4">前面追加列项表</button>
      <button οnclick="appendText()">追加整段文本</button>
        <button id="btn5">图片前面追加文本</button>
      <button id="btn6">图片后面追加文本</button>
       <button οnclick="afterText()">追加整段文本</button>
</body>
</html>