append(),appendTo(),appendChild()和prepend(),prependTo()的区别

方法 append() , appendTo()
描述 插入到所选元素内部的子元素的最后面

举个栗子

append(),appendTo()

<div>世界</div> 
<ul>
    <li>七月</li>
</ul>
<script>
  $('div').append('<span>你好</span>'); 
  // 等同于
  $('<span>你好</span>').appendTo('div');
  // 结果 => <div>世界<span>你好</span></div>

  // div元素为所选元素,而span元素为插入的内容。
  // 注意:appendTo前面一定要是jquery对象。

  var ul = $('ul');
  // 添加DOM对象:
  ul.append('<li>你好</li>');

  // 添加jQuery对象:
  ul.append($('#box'));

  // 添加函数对象:
  ul.append(function () {
      return '<li><span>你好</span></li>';
  });
</script>

appendChild()

<div id="box">你好</div>
<script>
  var boxp=document.createElement('p');
  var box=document.getElementById('box');
  boxp.innerHTML="七月";
  box.appendChild(boxp);
</script>

结果 => <div id="box">你好<p>七月</p></div>
方法 prepend(),prependTo()
描述 所选元素的开头(仍位于内部)插入指定内容。

举个栗子

prepend(),prependTo()

<p>你好</p>
<script>
  $("p").prepend("<b>世界</b> "); 
  // 等同于
  $("<b>世界</b>").prependTo("p");

  // 结果 => <p><b>世界</b>你好</p>
  // p元素为所选元素,b元素为指定内容。
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第1章 简介 第2章 DOM节点的创建 2-1 DOM创建节点及节点属性 通过JavaScript可以很方便的获...
    mo默22阅读 868评论 0 8
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,526评论 0 44
  • 1:jQuery节点创建与属性的处理 创建元素节点:可以有几种方式,后面会慢慢接触。常见的就是直接把这个节点的结构...
    码农小杨阅读 639评论 0 1
  • 创建 $('body').append($(" ")) //向body 中插入一个 div 插入 append:...
    学开船不会开船阅读 272评论 0 1
  • 我是怀着一种朝圣般的心情参加这次写手圈训练营的。一路走来,有圈友们的并行和陪伴,有组长的鼓励和督促,有自我...
    灯火阑珊12阅读 120评论 0 4