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. 关于appendChild和insertBefore appendTo()和append

    appendChild和insertBefore(原生js) appendTo()和append(jquery)

  2. （转）appendChild()、insertBefore()是移动element节点！

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

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

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

  4. jquery中append跟prepend的用法

    jquery中append和prepend的用法 append   是插入到元素中,并放到元素内的最后面prepend  是插入到元素中,并放到元素内的最前面例$("body"). ...

  5. js插入节点appendChild和insertBefore

    首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...

  6. 添加新内容的四个 jQuery 方法：append，prepend，after，before

    添加新内容的四个 jQuery 方法区别如下: append() - 在被选元素(里面)的结尾插入内容prepend() - 在被选元素(里面)的开头插入内容 //jQuery append() 方法 ...

  7. JS(JavaScript)插入节点的方法appendChild与insertBefore

    首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...

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

    转载 未曾见海  https://www.cnblogs.com/afei-qwerty/p/6682963.html 在jQuery中,添加元素有append(),prepend() 和 after ...

  9. jQuery中的append()和prepend(),after()和before()的差别

    jQuery中的append()和preappend(),after()和before()的差别 append()和prepend() 如果 <div class='a'> //<- ...

随机推荐

  1. shell 文本加密

    第一种:[ Python 与 Bash Shell 的结合 ]这个命令会让你输入一个字符串,然后会再输出一串加密了的数字. 加密代码[照直输入]:python -c 'print reduce(lam ...

  2. Python开发基础-Day7-闭包函数和装饰器基础

    补充:全局变量声明及局部变量引用 python引用变量的顺序: 当前作用域局部变量->外层作用域变量->当前模块中的全局变量->python内置变量 global关键字用来在函数或其 ...

  3. Codeforces 285 E. Positions in Permutations

    \(>Codeforces \space 285 E. Positions in Permutations<\) 题目大意 : 定义一个长度为 \(n\) 的排列中第 \(i\) 个元素是 ...

  4. [Codeforces #190] Tutorial

    Link: Codeforces #190 传送门 A: 明显答案为$n+m-1$且能构造出来 #include <bits/stdc++.h> using namespace std; ...

  5. 【最短路】【dijkstra】【二进制拆分】hdu6166 Senior Pan

    题意:给你一张带权有向图,问你某个点集中,两两结点之间的最短路的最小值是多少. 其实就是dijkstra,只不过往堆里塞边的时候,要注意塞进去它是从集合中的哪个起始点过来的,然后在更新某个点的答案的时 ...

  6. 【DFS】【贪心】Codeforces Round #411 (Div. 1) C. Ice cream coloring

    对那个树进行dfs,在动态维护那个当前的冰激凌集合的时候,显然某种冰激凌仅会进出集合各一次(因为在树上形成连通块). 于是显然可以对当前的冰激凌集合贪心染色.暴力去维护即可.具体实现看代码.map不必 ...

  7. React中的表单元素

    在web应用开发当中,表单还是很重要的元素. 应用表单组件有:文本框(input.textarea).单选按钮和复选框.Select组件. 文本框:文本框的状态改变即文本框中的内容的改变.此时的sta ...

  8. Codeforces Round #345 (Div. 1) D. Zip-line 上升子序列 离线 离散化 线段树

    D. Zip-line 题目连接: http://www.codeforces.com/contest/650/problem/D Description Vasya has decided to b ...

  9. NTP安全漏洞公告

        NTP服务今天公告了几个高危漏洞,大概信息如下: 描述:包含缓冲区溢出等多个高危或低危漏洞. 危害:可以利用获取服务器权限完全控制服务器,至少可以造成服务器崩溃. 影响范围:只有升级到4.2. ...

  10. 解决myeclipse不编译的方法

    请按照下面方法对号入座: MyEclipse不编译解决1. 确保 project->build automatically 已经被选上(最基本). MyEclipse不编译解决2. 如果选上了, ...