JQuery之append和appendTo的区别，还有js中的appendChild用法

Posted 2023-05-02

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery之append和appendTo的区别，还有js中的appendChild用法相关的知识，希望对你有一定的参考价值。

appendTo会将元素从当前位置移除，移动到指定元素后面去，append则不会。

appendChild是为指定元素添加子元素。参考技术A //append接收两个参数,html和appendFun
//html必填，appendFun可选
//appendFun函数也接受两个参数，index和html
//index是当前对象的索引,html是这个对象原来的html值
//用法
$("p").append("<b>粗体</b>"); //在所有的p元素尾部加一段html代码
$("p").append("<b>粗体</b>", function(index, html)
    console.log("当前P索引：" + index);
    console.log("当前P的HTML：" + html);
);    //在所有的p元素尾部加一段html代码并输出这些p元素的信息
//appendTo接收一个参数,selected
//selected必填，代表要把这个对象追加到哪个dom内
//用法
$("p").appendTo("body"); //把当前所有的P元素追加到body尾部
$("p").appendTo("#div"); //把当前所有的P元素追加到ID为div的dom尾部
$("<div />").appendTo("body");//新建一个div追加到body尾部

//简单来说就是append是把一段html字符串追加到已有的dom对象尾部，而appendTo是把一个已有的一个dom(也可以是html)对象追加到另外一个已存在于文档当中的dom尾部。

本回答被提问者采纳

jQuery中append appendTo prepend prependTo insertBefore insertAfter after before之间的区别

jQuery中有一个很关键的元素操作,他们的使用方法都一样,但是呈现的结果有所不同.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="jquery.js"></script>
  </head>
  <style>
  p {
    background-color: aquamarine;
  }
  </style>
  <body>
    <p id="n1">
      <span id="n2">span#n2</span>n1    
  </p>
  <p id="n3">
      <label id="n4" class="move">label#n4</label>n3
  </p>
  <p id="n5">
      <span id="n6">span#n6</span>n5
  </p>
  <p id="n7">
    <span id="n8">span#n8</span>n7
  </p>
  <p id="n9">
    <span id="n10">span#n10</span>n9
  </p>
  <p id="n11">
    <span id="n12">span#n12</span>n11
  </p>
  </body>
</html>

先新建一个jQuery div对象:

let newdiv = $(‘<div>new one</div>‘);

分别使用下列语句看看有什么效果

$(‘#n1‘).append(newdiv.clone());
newdiv.clone().insertAfter(‘#n1‘);
newdiv.clone().appendTo(‘#n3‘);
$(‘#n5‘).prepend(newdiv.clone());
$(‘#n5‘).insertBefore(newdiv.clone());
newdiv.clone().prependTo(‘#n7‘)
$(‘#n9‘).before(newdiv.clone());
newdiv.clone().before(‘#n9‘);
$(‘#n11‘).after(newdiv.clone());
newdiv.clone().after(‘#n11‘);

相信经过以上的代码你能够知道一些关系了:

1 To和不带To就是一个相反的关系

2 **pend是在p元素内末尾添加,成为p的last-child insert**是在p元素外添加,成为p的next,或first-sibling

3 A.before(B) = B.insertBefore(A) A.after(B) = B.insertAfter(A)效果上是相等的,但是返回值不一样,如果使用before返回的是A,如果是insert返回的是B

希望以上的总结能对你的理解有所帮助.

以上是关于JQuery之append和appendTo的区别，还有js中的appendChild用法的主要内容，如果未能解决你的问题，请参考以下文章

jquery中append和appendto的区别

jquery after append appendTo三个函数的区别

jquery中append与appendTo方法区别

jquery中append()与appendto()用法分析

append和appendTo的区别！