CreateTime--2017年11月2日16:57:59

Author:Marydon

appendChild()与append() insertBefore()与prepend()区别与联系

描述：

　　1.appendChild()是javascript在父节点最后面插入子节点的方法；

　　2.append()是jquery在父节点最后面插入子节点的方法；

　　3.insertBefore()在javascript中：在父节点最前面插入子节点，在jquery中：为指定节点前面插入兄弟节点；

　　4.prepend()是jquery在父节点最前面插入子节点的方法。

共性：

　　1.都是用来插入节点的，insertBefore在jquery的应用除外；

　　2.都是通过操作父节点来完成子节点的插入。

特性：

　　1.appendChild(tagElement)；

　　　　tagElement 只能是标签dom对象

　　　　dom对象的获取方式：方法一，通过js动态创建标签元素（通常使用）；方法二，使用js从页面获取dom对象。

　　举例：

　　HTML片段

<body><div id="test" style="display:none;"></div>
</body>

　　JAVASCRPT

//body标签添加一个子节点
// 方式一
var divElement = document.createElement('div');
divElement.innerHTML = "通过js创建dom对象的方式实现";
document.body.appendChild(divElement);
// 方式二
divElement = $('#test').clone()[0];
divElement.id = '';
divElement.style.display = 'block';
divElement.innerHTML = "通过js+jquery从页面获取dom对象的方式实现";
document.body.appendChild(divElement);

　　2.append(param)

　　　　param可以有三种表现形式：HTML片段字符串、文本、通过js创建或获取的dom对象　　

　　举例：

//body标签添加一个子节点
// 方式一
var divTagStr = '<div id="test">param为HTML片段字符串</div>'
$("body").append(divTagStr);
// 方式二
var textStr = "param为文本";
$("body").append(textStr);
// 方式三
var divElement = document.createElement('div');
divElement.innerHTML = "param为通过js创建的dom对象";
$("body").append(divElement);

　　3.insertBefore()

　　3.1 在javascript中的用法　　　　

　　　　parentElement.insertBefore(targetElement,positionElement);

　　　　targetElement：目标对象，将要插入的元素；

　　　　positionElement：插入位置对象，元素将被插入到该对象的前面。

　　　　注意：该方法必须通过父节点才能够调用（只能通过父节点来完成对子节点的拼接）。

　　举例：

　　　　HTML片段

<body><div><p id="duanluo">div中的段落标签p</p></div>
</body>

　　　　JAVASCRIPT　　

window.onload = function(){        //id="test"的标签添加一个子节点var divElement = document.createElement('div');// appendChild()divElement.innerHTML = "展示insertBefore()方法的用法";var brotherElement = document.getElementById("duanluo");brotherElement.parentNode.insertBefore(divElement,brotherElement);
}

　　3.2 在jquery中的用法

　　　　$(targetElement).insertBefore(positionElement);

　　　　targetElement：目标对象，将要插入的元素；

　　　　positionElement：插入位置对象，元素将被插入到该对象的前面

　　　　注意：该方法必须通过即将插入的对象进行调用

　　举例：

window.onload = function(){var pElement = document.createElement('p');pElement.innerHTML = "指定节点前插入兄弟节点";$(pElement).insertBefore('#duanluo');
}

　　4.prepend(param)

　　　　param可以有三种表现形式：HTML片段字符串、文本、通过js创建或获取的dom对象

情形一：

　　通过父节点添加子节点

　　1.在父节点最后面添加子节点；

　　HTML片段

<body><div id="test"><p>div中的段落标签p</p></div>
</body>

　　JAVASCRIPT

window.onload = function(){        /* id="test"的标签添加一个子节点 */// appendChild()var divElement = document.createElement('div');divElement.innerHTML = "使用js的appendChild()方法添加子节点";document.getElementById("test").appendChild(divElement);// append()var divTag = "<div>使用jquery的append()方法添加子节点</div>";$("#test").append(divTag);
}

　　2.在父节点最前面添加子节点。

　　HTML片段

<div id="test"><p>测试insertBefore()</p><p>div中的段落标签p</p></div>

　　JAVASCRIPT

window.onload = function(){        /* id="test"的标签最前面添加一个子节点 */// insertBefore()var h1Element = document.createElement('h1');h1Element.innerHTML = "使用js的insertBefore()方法添加子节点";var parentElement = document.getElementById("test");var firstElement = parentElement.firstChild;parentElement.insertBefore(h1Element,firstElement);        // prepend()var h1Tag = "<h1>使用jquery的prepend()方法添加子节点</h1>";$("#test").prepend(h1Tag);
}

　　3.使用jquery实现的另外两种方式

window.onload = function(){        /* 使用jquery的appendTo()添加子节点 */    var divTag = "<div>使用jquery的appendTo()方法添加子节点</div>";$(divTag).appendTo("#test");/* 使用jquery的prependTo()添加子节点 */var h1Tag = "<h1>使用jquery的prependTo()方法添加子节点</h1>";$(h1Tag).prependTo("#test");
}

　　3.1 append() prpend() appendTo() prpendTo()用法简述

　　append()和prpend()都是通过选取确定插入位置的对象来完成插入操作；

　　语法：$(positionElement).append(targetElement)和$(positionElement).prepend(targetElement);

　　appendTo()和prpendTo()都是通过选取将要插入的对象来指定插入操作。

　　语法：$(targetElement).appendTo(positionElement)和$(targetElement).prpendTo(positionElement)；

　　小结：

　　　　在父节点最后面添加子节点：

　　　　javascirpt使用appendChild()，jquery使用append()或appendTo()

　　　　在父节点最前面添加子节点

　　　　javascirpt使用insertBefore()，jquery使用prpend()或prpendTo()

情形二：　　

　　1.在指定子节点后面添加兄弟节点；

　　说明：javascript无法实现，jquery可以实现

　　jquery实现：调用insertAfter()或after()实现

<div id="test"><p id="duanluo">测试jquery指定节点后插入兄弟节点方法实现</p><p>div中的段落标签p</p></div>

window.onload = function(){var pTag = '<p>指定节点后插入兄弟节点</p>';// 方法一$(pTag).insertAfter('#duanluo');// 方法二    $('#duanluo').after(pTag);
}

　　2.在指定子节点前面添加兄弟节点。

　　实现：

　　HTML片段

<div id="test"><p>测试insertBefore()</p><p id="duanluo">div中的段落标签p</p></div>

　　2.1 js实现：通过父节点添加兄弟节点（曲线救国）

window.onload = function(){        /* 指定位置添加一个兄弟节点 */// insertBefore()var pElement = document.createElement('p');pElement.innerHTML = "指定节点前插入兄弟节点";var parentElement = document.getElementById("test");var brotherElement = document.getElementById("duanluo");parentElement.insertBefore(pElement,brotherElement);
}

　　2.2 jquery实现：调用insertBefore()或before()方法实现

window.onload = function(){var pTag = '<p>指定节点前插入兄弟节点</p>';// 方法一$(pTag).insertBefore('#duanluo');// 方法二    $('#duanluo').before(pTag);
}

　　2.3 insertAfter() insertBefore() after() before()用法简述

　　insertAfter()和insertBefore()都是通过选取将要插入的对象来指定插入操作；

　　语法：$(targetElement).insertAfter(positionElement)和$(targetElement).insertBefore(positionElement)；

　　after()和before()都是通过选取确定插入位置的对象来完成插入操作。

　　语法：$(positionElement).after(targetElement)和$(positionElement).before(targetElement);

</div

appendChild append insertBefore prepend相关推荐

  1. JS DOM 编程复习笔记 -- insertBefore、insertAfter、append、prepend（七）

    今天我们来继续来复习DOM的一些插入方法,insertBefore(),append()和prepend()方法.前面我们只用到过一个appendChild()方法.我们一个个看语法和示例,包你看完就 ...

  2. jquery创建添加append、prepend、appendTo、prependTo、after、insertAfter、before、insertBefore

    全栈工程师开发手册 (作者:栾鹏) jquery系列教程2-DOM操作全解 jquery创建添加元素 jquery支持直接使用h5代码作为参数创建元素,将元素添加到dom树中append.prepen ...

  3. JS——appendChild()和insertBefore()插入新节点区别

    文章目录 前言 appendChild(newchild) insertBefore(newchild, refchild) insertBefore() 补充 参考资料 前言 在html中,如果需要 ...

  4. jQuery中append、prepend等的用法与记忆

    jQuery中,有append.prepend等方法,容易搞混淆,在这里记录一下,以便于区分 大致有如下方法,可以理解为: append:后置x(-后面添加) prepend:前置x (-前面添加) ...

  5. jQuery中append()、prepend()与after()、before()的区别

    原文地址:https://www.cnblogs.com/afei-qwerty/p/6682963.html 在jQuery中,添加元素有append().prepend()和 after().be ...

  6. js便签笔记（3）——切记：appendChild()、insertBefore()是移动element节点！

    appendChild().insertBefore()是移动element节点,看书的时候注意过,也可以做一个简单的例子测试一下: <div id="div1">&l ...

  7. jquery中select操作append、prepend、remove、find、val、get、selectedIndex、attr、option

    全栈工程师开发手册 (作者:栾鹏) jquery系列教程2-DOM操作全解 jquery中select操作 jquery中select操作函数和字段包括append.prepend.remove.fi ...

  8. jquery中append、prepend, before和after方法的区别

    1. append()和prepend() 假设 <div class='a'> //<---you want div c to append in this<div clas ...

  9. JavaScript 中 append()、prepend()、after()、before() 的区别

    内容 append().prepend().after().before() 的区别 jQuery 操作 DOM 之添加节点 方法名 作用 $(selector).append() 指定元素内部添加, ...

最新文章

  1. 如何开启PostGreSQL的远程访问端口？
  2. Apache Mahout中推荐算法Slope one源码分析
  3. 支付系统整体架构详解
  4. Spring越来越强，而我们越来越快餐！离开了Spring，居然API都写不出来了！
  5. CNN网络架构演进：从LeNet到DenseNet
  6. Hotmail 开始支持完全 HTTPS 加密以增强安全性
  7. 深度学习目标检测(YoloV5)项目——从0开始到项目落地部署
  8. 剑指 Offer 22. 链表中倒数第k个节点(C语言)
  9. struts2的OGNL表达式(三)
  10. vba 跳出for循环_VBA简单入门08：For循环
  11. javascript模块_JavaScript中的模块
  12. （大数据工程师学习路径）第二步 Vim编辑器----Vim文档编辑
  13. java-Hyper-V
  14. Windows中获取用户密码
  15. 基于Vue2.0的音乐播放器——歌手模块（拿不到数据）
  16. 【NOIP2014提高组】石头剪子布
  17. 苹果微信更新不了最新版本_微信更新7.0版本，为何优先给iOS用户体验？这是在歧视安卓？...
  18. mc服务器怎么修改浮空字,我的世界浮空字体怎么使用 浮空字体使用攻略
  19. 2020.9.9华为笔试记忆：KMP+记忆化搜索+字典树
  20. 巧用 Docker Buildx 构建多种系统架构镜像

热门文章

  1. 基于springboot的医院信息管理系统
  2. ERROR 2003 (HY000): Can‘t connect to MySQL server on ‘localhost‘ (10061)的解决办法
  3. markdownpad 2 pro版本（注册码）
  4. vagrant学习笔记
  5. [转]linux grep命令
  6. 《LeetCode力扣练习》第6题 C语言版 （做出来就行，别问我效率。。。。）
  7. aop对请求后端的参数修改_Spring Boot AOP之对请求的参数入参与返回结果进行拦截处理...
  8. c++ map 析构函数_C++学习刷题6--C++类的使用：构造函数、析构函数和类的使用
  9. c语言中void指针,C 语言 void指针
  10. python训练数据集_Python——sklearn提供的自带的数据集