jQuery ?? ??

jQuery? ???? ??? ??/???? ?? ??? ? ????.

? HTML ??? ??

? ???? ???? ? ?? jQuery ???? ?????.

append() - ??? ??? ?? ??? ??
prepend() - ??? ??? ?? ??? ?? ??
after() - ??? ?? ?? ?? ??
before() - ??? ?? ?? ?? ??

jQueryappend() ???

jQueryappend() ???? ??? ??? ?? ??? ?????.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("p").append(" <b>追加文本</b>。");
            });
            $("#btn2").click(function(){
                $("ol").append("<li>追加列表項(xiàng)</li>");
            });
        });
    </script>
</head>
<body>
<p>這是一個(gè)段落。</p>
<p>這是另外一個(gè)段落。</p>
<ol>
    <li>列表項(xiàng)  1</li>
    <li>列表項(xiàng)  2</li>
    <li>列表項(xiàng)  3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表項(xiàng)</button>
</body>
</html>

????? ???? ??? ???

jQuery prepend() ???

jQuery prepend() ???? ??? ??? ?? ??? ??? ?????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>在開頭追加文本</b>。 ");
});
$("#btn2").click(function(){
$("ol").prepend("<li>在開頭添加列表項(xiàng)</li>");
});
});
</script>
</head>
<body>
<p>這是一個(gè)段落。</p>
<p>這是另外一個(gè)段落。</p>
<ol>
<li>列表 1</li>
<li>列表 2</li>
<li>列表 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表項(xiàng)</button>
</body>
</html>

????? ???? ??? ???

append() ? prepend() ???? ?? ?? ?? ??? ??? ?????

?? ???? ? ?? ??? ??? ?????. ??? ??? ?? ??? ?? /? ??? ???/HTML? ?????.

??? append() ? prepend() ???? ????? ?? ???? ? ??? ?? ? ????. ???/HTML? ?? ?? ?? jQuery? ?? ????? JavaScript ?? ? DOM ??? ?? ??? ? ????.

?? ???? ? ?? ??? ??? ????. ??? ??? ???/HTML, jQuery ?? JavaScript/DOM? ???? ??? ? ????. ?? ?? add() ???? ?? ??? ? ??? ???? ?????(prepend()?? ??).

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
function appendText(){
var txt1="<p>文本。</p>";              // 使用 HTML 標(biāo)簽創(chuàng)建文本
var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 創(chuàng)建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。";               // 使用 DOM 創(chuàng)建文本 text with DOM
$("body").append(txt1,txt2,txt3);        // 追加新元素
}
</script>
</head>
<body>
<p>這是一個(gè)段落。</p>
<button onclick="appendText()">追加文本</button>
</body>
</html>

????? ???? ??? ???

jQuery after() ? before() ???

jQuery after() ???? ??? ?? ?? ??? ?????.

jQuery before() ???? ??? ?? ?? ??? ?????.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("img").before("<b>之前</b>");
            });
            $("#btn2").click(function(){
                $("img").after("<i>之后</i>");
            });
        });
    </script>
</head>
<body>
<img src="/upload/course/000/000/006/580b170b612ba140.jpg"  height="150" width="150">
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body>
</html>

????? ???? ??? ???

after() ? before() ???? ?? ?? ?? ??? ??? ?????

after() ? before() ???? ??? ? ????. ????? ?? ??? ??? ????? ??? ? ????. ??? ??? ???/HTML, jQuery ?? JavaScript/DOM? ?? ??? ? ????.

?? ???? ? ?? ??? ??? ????. ??? ??? ???/HTML, jQuery ?? JavaScript/DOM? ???? ??? ? ????. ?? ?? after() ???(before()?? ??)? ?? ??? ? ??? ???? ?????.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文網(wǎng)(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        function afterText(){
            var txt1="<b>I </b>";                    // 使用 HTML 創(chuàng)建元素
            var txt2=$("<i></i>").text("love ");     // 使用 jQuery 創(chuàng)建元素
            var txt3=document.createElement("big");  // 使用 DOM 創(chuàng)建元素
            txt3.innerHTML="jQuery!";
            $("img").after(txt1,txt2,txt3);          // 在圖片后添加文本
        }
    </script>
</head>
<body>
<img src="/upload/course/000/000/006/580b170b612ba140.jpg"  height="150" width="150">
<br><br>
<button onclick="afterText()">之后插入</button>
</body>
</html>

????? ???? ??? ???

???? ??

??? ??

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("img").before("<b>之前</b>"); }); $("#btn2").click(function(){ $("img").after("<i>之后</i>"); }); }); </script> </head> <body> <img src="https://img.php.cn/upload/course/000/000/006/580b170b612ba140.jpg" height="150" width="150"> <br><br> <button id="btn1">之前插入</button> <button id="btn2">之后插入</button> </body> </html>

?????? ???

????