JQuery创建节点Append与AppendTo区别及其用法

最新推荐文章于 2024-04-17 16:01:49 发布

八哥声动视界

最新推荐文章于 2024-04-17 16:01:49 发布

阅读量2.9k

点赞数 1

分类专栏：自我学习；

本文链接：https://blog.csdn.net/qq_36765367/article/details/79994561

版权

自我学习；专栏收录该内容

9 篇文章 1 订阅

订阅专栏

append：这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中的情况类似。

appendTo：实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

append()前面是被插入的对象，后面是要在对象内插入的元素内容
appendTo()前面是要插入的元素内容，而后面是被插入的对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="../jquery-3.3.1/jquery-3.3.1.js"></script>
	<style>
		.content {
        	width: 300px;
    	}
    	.content2 {
        	width: 300px;
    	}
	    .append{
	        background-color: blue;
	    }
	    .appendTo{
	        background-color: red;
	    }
	</style>
</head>
<body>
	<h2>通过append与appendTo添加元素</h2>
    <button id="bt1">点击通过jQuery的append添加元素</button>
    <button id="bt2">点击通过jQuery的appendTo添加元素</button>
    <div class="content"></div>
    <div class="content2"></div>
    <script type="text/javascript">
    	$('#bt1').on('click',function(){
    		$('.content').append('<div class="append">通过append方法添加的元素</div>')
    	})
    	$('#bt2').on('click',function(){
    		$('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo('.content')
    	})
    </script>
</body>
</html>

在本实验中实现了JQuery的对点击事件的处理。

八哥声动视界

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery创建节点Append与AppendTo区别及其用法

append：这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中的情况类似。appendTo：实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。append()前面是被插入的对象，后面是要在对象内插入的元素内容appendTo()前面是要插入的元素内容，而后面是被插入的对象&lt;!DOCTYPE html...
复制链接

扫一扫