jQuery如何添加新的HTML元素內(nèi)容

發(fā)布時(shí)間：2022-02-22 10:42:57 來源：億速云閱讀：296 作者：小新欄目：開發(fā)技術(shù)

小編給大家分享一下jQuery如何添加新的HTML元素內(nèi)容，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

jQuery - 添加元素
通過 jQuery，可以很容易地添加新元素/內(nèi)容。
添加新的 HTML 內(nèi)容，用于添加新內(nèi)容的四個(gè) jQuery 方法：
append() - 在被選元素的結(jié)尾插入內(nèi)容
prepend() - 在被選元素的開頭插入內(nèi)容
after() - 在被選元素之后插入內(nèi)容
before() - 在被選元素之前插入內(nèi)容

jQuery append() 方法
jQuery append() 方法在被選元素的結(jié)尾插入內(nèi)容。

<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("p").append(" <b>Appended text</b>.");
    });
    $("#btn2").click(function(){
        $("ol").append("<li>Appended item</li>");
    });
});
</script>
</head>
<body>
    <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">追加列表項(xiàng)</button>
</body>
</html>

jQuery prepend() 方法
jQuery prepend() 方法在被選元素的開頭插入內(nèi)容。

$("p").prepend("Some prepended text.");

通過 append() 和 prepend() 方法添加若干新元素
在上面的例子中，我們只在被選元素的開頭/結(jié)尾插入文本/HTML。
不過，append() 和 prepend() 方法能夠通過參數(shù)接收無限數(shù)量的新元素。
可以通過 jQuery 來生成文本/HTML，或者通過 JavaScript 代碼和 DOM 元素。
在下面的例子中，我們創(chuàng)建若干個(gè)新元素。
這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創(chuàng)建。
然后我們通過 append() 方法把這些新元素追加到文本中（對(duì) prepend() 同樣有效）：

<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js"></script>
<script>
function appendText() {
    var txt1="<p>Text.</p>";             // 以 HTML 創(chuàng)建新元素
    var txt2=$("<p></p>").text("Text."); // 以 jQuery 創(chuàng)建新元素
    var txt3=document.createElement("p");
    txt3.innerHTML="Text.";              // 通過 DOM 來創(chuàng)建文本
    $("body").append(txt1,txt2,txt3);    // 追加新元素
}
</script>
</head>
<body>
    <p>This is a paragraph.</p>
    <button onclick="appendText()">追加文本</button>
</body>
</html>

jQuery after() 和 before() 方法
jQuery after() 方法在被選元素之后插入內(nèi)容。
jQuery before() 方法在被選元素之前插入內(nèi)容。

<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("img").before("<b>Before</b>");
    });
    $("#btn2").click(function(){
        $("img").after("<i>After</i>");
    });
});
</script>
</head>
<body>
    <img src="../hulumiao.gif" alt="HuluMiao Logo" />
    <br><br>
    <button id="btn1">在圖片前面添加文本</button>
    <button id="btn2">在圖片后面添加文本</button>
</body>
</html>

通過 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能夠通過參數(shù)接收無限數(shù)量的新元素。
可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創(chuàng)建新元素。
在下面的例子中，我們創(chuàng)建若干新元素。
這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創(chuàng)建。
然后我們通過 after() 方法把這些新元素插到文本中（對(duì) before() 同樣有效）：

<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.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);         // 在 img 之后插入新元素
}
</script>
</head>
<body>
    <img src="../hulumiao.gif" alt="HuluMiao Logo" />
    <br><br>
    <button onclick="afterText()">在圖片后面添加文本</button>
</body>
</html>

看完了這篇文章，相信你對(duì)“jQuery如何添加新的HTML元素內(nèi)容”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

jQuery如何添加新的HTML元素內(nèi)容

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽