jquery append和appendTo 示例
时间：2020-02-23 14:46:05 来源:igfitidea点击:
在本教程中，我们将看到jQuery append和appendTo方法。
两者都执行相同的任务，在每个选定元素的内容之后插入文本或html，这样它将把文本或html放在选定元素的最后一个索引中。这两种方法都将文本或html作为子元素添加到所选元素中。append和appendTo方法的语法完全不同。
Syntax for append()：
$("selectors").append("element to be inserted")
Example :
$("div").append(" hello ");
Appendto()语法：
$("element to be inserted") .appendTo("div");
Example:
$("hello ").appendTo("div");
让我们通过示例来理解：
<!doctype>
<html>
<head>
<title>Jquery append and appendTo example </title>
<script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>
<h2>Jquery append and appendTo example</h2>
<style>
.red{
border:3px dotted red;
color:red;
font-family: arial narrow;
}
.blue{
border:3px dotted red;
color:blue;
font-family: arial narrow;
}
.blackBorder{
border:4px dotted black;
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#appendButton").click(function(){
$("div").append("inserting using append");
});
$("#appendToButton").click(function(){
$("inserting using appendTo").appendTo("div");
});
$("#reset").click(function(){
location.reload();
});
});
</script>
<body>
<button id="appendButton">Using append</button>
<button id="appendToButton">Using appendTo</button>
<button id="reset">Reset</button>
<div class='blackBorder'>
Hello world from theitroad!!!!
</div>
<br
<div class='blackBorder' >
Welcome to JQuery.
</div>
</body>
</html>
