jQuery 入门教程(14): 添加HTML元素

虾米姐阅读：721 2021-04-01 10:00:03 评论：0

使用jQuery可以方便的添加新的HTML元素。
下面的方法用于添加HTML元素：

append() – 在指定的元素的尾部添加一个新内容。
prepend() -在指定的元素里前部添加新内容。
after() – 在指定元素后添加新内容
before() -在指定元素的前面添加新内容。

乍一看append,prepend 和after,before似乎功能一样，但append,prepend指在选中的元素本身（内部）的前面和后面，而after,before指在选择中的元素的前面和后面。

可以参考下面的append例子：

[html] view plain copy print ?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Demo</title>
<script src="scripts/jquery-1.9.1.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">Append text</button>
<button id="btn2">Append list items</button>
</body>
</html>

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JQuery Demo</title> 
    <script src="scripts/jquery-1.9.1.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">Append text</button> 
    <button id="btn2">Append list items</button> 
</body> 
</html>

prepend示例：

[html] view plain copy print ?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Demo</title>
<script src="scripts/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("p").prepend("<b>Prepended text</b>. ");
});
$("#btn2").click(function () {
$("ol").prepend("<li>Prepended 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">Prepend text</button>
<button id="btn2">Prepend list item</button>
</body>
</html>

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JQuery Demo</title> 
    <script src="scripts/jquery-1.9.1.js"></script> 
    <script> 
        $(document).ready(function () { 
            $("#btn1").click(function () { 
                $("p").prepend("<b>Prepended text</b>. "); 
            }); 
            $("#btn2").click(function () { 
                $("ol").prepend("<li>Prepended 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">Prepend text</button> 
    <button id="btn2">Prepend list item</button> 
 
</body> 
</html>

append(),prepend()支持同时插入多个元素，下面的例子添加三个使用不同方法创建的新元素：

[html] view plain copy print ?

function appendText()
{
// Create element with HTML
var txt1="<p>Text.</p>";
// Create with jQuery
var txt2=$("<p></p>").text("Text.");
// Create with DOM
var txt3=document.createElement("p");
txt3.innerHTML="Text.";
// Append the new elements
$("p").append(txt1,txt2,txt3);
}

function appendText() 
 { 
 // Create element with HTML 
 var txt1="<p>Text.</p>"; 
// Create with jQuery 
 var txt2=$("<p></p>").text("Text."); 
 // Create with DOM 
 var txt3=document.createElement("p"); 
 txt3.innerHTML="Text."; 
 // Append the new elements 
 $("p").append(txt1,txt2,txt3); 
 }

下面的例子使用after,before 在指定的元素前后面添加新内容：

[html] view plain copy print ?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Demo</title>
<script src="scripts/jquery-1.9.1.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="/images/guidebee.png"
alt="guidebee" width="120" height="125">
<br>
<br>
<button id="btn1">Insert before</button>
<button id="btn2">Insert after</button>
</body>
</html>

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JQuery Demo</title> 
    <script src="scripts/jquery-1.9.1.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="/images/guidebee.png" 
        alt="guidebee" width="120" height="125"> 
    <br> 
    <br> 
    <button id="btn1">Insert before</button> 
    <button id="btn2">Insert after</button> 
</body> 
</html>

同样after,before也支持同时插入多个元素：

[html] view plain copy print ?

function afterText()
{
// Create element with HTML
var txt1="<b>I </b>";
// Create with jQuery
var txt2=$("<i></i>").text("love ");
// Create with DOM
var txt3=document.createElement("big");
txt3.innerHTML="jQuery!";
// Insert new elements after img
$("img").after(txt1,txt2,txt3);
}

标签:jquery

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。