jQuery append（）和appendTo（）示例

最新推荐文章于 2024-02-24 20:11:30 发布
最新推荐文章于 2024-02-24 20:11:30 发布
阅读量527 收藏 1
点赞数
文章标签： javascript ViewUI

jQuery append（）和appendTo（）方法都执行相同的任务，在匹配元素的内容之后添加文本或html内容。 主要区别在于语法。

例如， 

<div class="box">I'm a big box</div>
<div class="box">I'm a big box 2</div>

1. $（'selector'）。append（'new text'）; 

$('.box').append("<div class='newbox'>I'm new box by prepend</div>");

2. $（'new text'）。appendTo（'selector'）; 

$("<div class='newbox'>I'm new box by appendTo</div>").appendTo('.box');

结果

上面的两个方法都执行相同的任务，但是使用不同的语法， append（）或appendTo（）之后的新内容将变为 

<div class="box">
   I'm a big box
   <div class='newbox'>I'm new box by prepend</div>
</div>

<div class="box">
   I'm a big box 2
   <div class='newbox'>I'm new box by prepend</div>
</div>

自己尝试 

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
	.box{
		padding:8px;
		border:1px solid blue;
		margin-bottom:8px;
		width:300px;
		height:100px;
	}
	.newbox{
		padding:8px;
		border:1px solid red;
		margin-bottom:8px;
		width:200px;
		height:50px;
	}
</style>

</head>
<body>
  <h1>jQuery append() and appendTo example</h1>

  <div class="box">I'm a big box</div>
  
  <div class="box">I'm a big box 2</div>
  
  <p>
  <button id="append">append()</button>
  <button id="appendTo">appendTo()</button>
  <button id="reset">reset</button>
  </p>
  
<script type="text/javascript">
	
    $("#append").click(function () {
		
	  $('.box').append("<div class='newbox'>I'm new box by append</div>");
	  
    });
	
	$("#appendTo").click(function () {
		
	  $("<div class='newbox'>I'm new box by appendTo</div>").appendTo('.box');
	  
    });
	
	$("#reset").click(function () {
	  location.reload();
    });
	
</script>
</body>
</html>
试试演示
标签：

翻译自: https://mkyong.com/jquery/jquery-append-and-appendto-example/

cyan20115
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jq操作节点：append、appendTo、prepend、prependTo、before、insertBefore、after、insertAfter、remove、empty、clone（）
YY的博客
11-18 528
append、appendTo、prepend、prependTo、before、insertBefore、after、insertAfter、remove（）、empty（）、html（“”）、replaceWith（）、replaceAll（）、clone（）
jQuery中append()方法与appendTo()方法
Liuxiaoyang1999的博客
11-09 347
append方法(): a.append(content|fn) ：向每个匹配元素（jQuery对象）内部的末尾处插入append方法中内容； 代码示例： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <...
jQuery appendTo ( ) 方法
m0_57835615的博客
06-11 1806
appendTo() 方法在被选元素的结尾插入 HTML 元素。 语法格式： $(content).appendTo(selector) 示例：
【JQuery】appendTo()
O(∩_∩)O
04-02 371
作用是向指定的元素内插入内容，它的使用方式是： $(content).appendTo(selector) 参数content表示需要插入的内容，参数selector表示被插的那个元素，即把content内容插入selector元素内，默认是在尾部。 作用和append()有点相似，但用法是反过来的。 appendTo()方法插入内容
jquery appendTo用法
weixin_30243533的博客
03-27 182
$("#top_cartWarp").appendTo($("#top_main_right")).css('position','relative').css('top','0px'); 返回值:jQueryappendTo(content) V1.0概述 把所有匹配的元素追加到另一个指定的元素元素集合中。 实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作...
jquery append()和appendTo() 的区别
m0_62360527的博客
05-16 2373
append()和appendTo() 的区别 append() $(selector).append(content,function(index,html)) 在A的后面添加B content，可以是HTML 元素，jQuery 对象，DOM 元素， <script> $(function () { $('ul').append(123456) }) </script> </head> &
JQuery中的append与appendTo
qiangzhogshou的博客
11-28 103
一、append <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.3.1.js"></script> </head> <body> <span id="te...
jquery append与appendTo方法比较
12-02
jquery中append与appendTo方法区别 1. append(content)方法 方法作用：向每个匹配的元素内部追加内容。 参数介绍：content (): 要追加到目标中的内容。 用法示例： HTML代码为<p>I come from </p><p>I love  向...
jquery中append()与appendto()用法分析
12-08
在jQuery库中，`append()`和`appendTo()`都是用于向HTML元素添加内容的方法，但它们的使用方式有所不同。这两个方法在很多情况下可以互换，但理解它们的区别可以帮助你更有效地编写JavaScript代码。 1. `append()`...
节点的插入之append()和appendTo()的用法介绍
09-04
在JavaScript的jQuery库中，`append()`和`appendTo()`是用来插入HTML节点的两个非常重要的方法。它们都用于在DOM（文档对象模型）中添加新的元素，但使用方式略有不同。 `append()`方法允许你在现有元素的末尾添加...
JQuery jsonp 使用示例代码
12-11
- `$( '<li/>' ).text( v.id + ' ' + v.name ).appendTo( $ul )`: 为每个对象创建一个新的列表项，设置文本为`id`和`name`的组合，然后将其添加到列表中。 - `$('#res').append($ul);`: 将列表添加到页面的`...
JQuery中append()和appendTo()方法
Cloud_lfqc的博客
11-09 295
$(x).append(y)方法：在每个所选择的元素x内部的末尾处插入内容y <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-3.3.1.js"></s...
jQuery--插入节点之内部插入（append()、appendTo()、prepend()、prependTo()）详解
吴声子夜歌的博客
10-02 3453
插入节点 在动态创建HTML元素节点后，还需将节点插入到文档中才有用。根据元素的插入位置不同，插入方法分为内部插入和外部插入，如下表： 类型 方法 描述 内部插入 append() 向每个匹配的元素内部追加由参数指定的内容 appendTo() 把所有匹配的元素追加到指定的元素中 prepend() 向每个匹配的元素内部前置内容 外部插入 after() 在每个匹配...
jQuery总结四、append 与appendTo、after、before、wrap、unwrap、replaceWith、empty()、remove；detach、is、hasclass
m0_57446284的博客
09-29 1137
一、append 与appendTo 1.1.1 append append向每个匹配的元素内部追加目标 content：欲追加的内容String、Element、jQuery fn：function（index，html） index：对象在集合数组中的索引 html：对象源html内容 示例： $('#f0').append("<br>") //增加一份br标签 1.1.2 appendTo 追加当前对象到指定的元素中去 content：欲追加的内容Stri...
无涯教程-jQuery - Appendto方法函数
最新发布
无涯教程
02-24 613
appendTo(selector)方法将所有匹配的元素附加到另一个指定的元素集。
原生js vue地图下钻
娄小研的博客
10-27 392
<template> <div id="china_map_box"> <el-button type="primary" size="mini" class="back" @click="back" v-if="deepTree.length > 1">返回</el-button> <div class="echarts"> <div id="map">&lt...
关于JQuery中的appendTo方法
qq_39309971的博客
05-14 895
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;JQuery中的appendTo方法是会改变页面原有的结构，包括原从页面中取到结构的地方，比如如下代码（代码来自慕课网）： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-type&quot
jQuery 文档操作 - appendTo() 方法---动态加HTML 元素
巴黎左岸 · 荼靡花开
08-31 1607
    定义和用法   appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。 提示：append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。 语法 $(content).appendTo(selector) 参数 描述 content 必需。规定要插...
append() 和appendTo()的区别
热门推荐
懒惰的小妖
01-16 1万+
append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容。 appendTo() 向目标结尾插入匹配元素集合中的每个元素。 1.append() 方法在被选元素的结尾（仍然在内部）插入指定内容。  2.appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。 提示：append() 和 appendTo() 方法执行的任务相...
jQuery基础教程：创建节点和插入节点示例
jQuery基础教程与创建节点和插入节点示例 jQuery是当前最流行的JavaScript库之一，它提供了轻量级、强大的选择器、出色的DOM操作封装、可靠的事件处理机制和出色的浏览器兼容性等特点。下面是关于jQuery基础教程和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值