您的位置：首页 > Web前端 > JQuery

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

2014-03-06 16:02 197 查看

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 onclick="appendText()">追加整段文本</button>

        <button id="btn5">图片前面追加文本</button>

      <button id="btn6">图片后面追加文本</button>

       <button onclick="afterText()">追加整段文本</button>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery

相关文章推荐

新的分享

章节导航