var fragment = document.createDocumentFragment();
li = document.createElement('li');
li.className = "xxx";
fragment.appendChild(li);
document.getElementById("xx").appendChild(fragment);
如上,须要先原生创建节点,节点内容成为了document的一部分才干appendchild。
假设直接  appendchild(“<div></div>”)是不能够的。
由于appendChild(Node)这个 方法通常是在指定元素节点的最后一个子节点之后加入节点 
但假设Node是页面中的DOM对象,那么就不是加入节点了,就是直接Move节点。 
appendChild你能够理解为移动一个元素。假设想复制一份过去,要事先clone 
可是无论如何,这个node须要先存在。
append()前面是要选择的对象,后面是要在对象内插入的元素内容 

appendTo()前面是要插入的元素内容且为Jquery对象。而后面是要选择的对象

实例:

$('#a').append('content');
$('<div>content</div>').appendTo($('#a')); //注意appendTo前面一定要是Jquery对象。

纯属个人观点。有误希望大家指点,谢谢

JS原生追加子节点的更多相关文章

  1. JS之获取子节点

    在JS中获取子节点有以下几种方法: firstElementChild.firstChild.childNodes和children 我们通过一个例子来分析这几种方法的区别(获取div下的p标签) 输 ...

  2. JavaScript DOM查询,原生js实现元素子节点的获取

    在网页网页开发中,经常会需要获取某个网页元素的子元素,然后对其进行事件绑定.或样式修改等行为.这些操作对于jquery来说很容易,但是对于原生js会稍微麻烦一些,这里将介绍四种方法获取元素的子元素(本 ...

  3. js 递归获取子节点所有父节点,深度遍历获取第一个子树

    前端需求. 递归 深度优先遍历算法 // 查找一个节点的所有父节点 familyTree (arr1, id) { var temp = [] var forFn = function (arr, i ...

  4. JS 查找遍历子节点元素

    function nextChildNode(node,clazz,tagName){ var count= node.childElementCount; for(var i=0;i<coun ...

  5. 总结获取原生JS(javascript)的父节点、子节点、兄弟节点

    关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了-- 话不多说看代码 获取父节点 及 父节点下所有子节点(兄弟节点) <ul> <l ...

  6. JS和jQuery获取节点的兄弟,父级,子级元素

    原文转自http://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的 ...

  7. 通过JS动态追加标签,以父评论子评论为例

    以下代码前后端交互以Django模板语法为例 先来以伪代码来示意用法: HTML部分: JS动态插入部分代码: 运行之后我们来浏览器看检查打印的内容: 看插入前后打印结果我们可以得知 $title[0 ...

  8. 原生js快速渲染dom节点

    function renderDom(str){ var _div = document.createElement('div'); _div.innerHTML = str; var dom_tem ...

  9. js遍历 子节点 子元素

    Js 节点 子元素 属性 方法 // 添加子节点前 删除所有子节点 var usernameEle = document.getElementById("username"); v ...

随机推荐

  1. ElasticSearch 数据类型

    1.范围数据类型 支持以下范围类型: integer_range : 一系列带符号的32位整数,最小值为,最大值为 float_range:一系列单精度32位IEEE 754浮点值. long_ran ...

  2. webmagic 初始化 startRequests

    在spider类中有三个方法可以初始化startRequests.可以对这些地方进行扩展. /** * create a spider with pageProcessor. * * @param p ...

  3. 转: 私人珍藏的Chrome插件,吐血推荐

    转:来自 http://stormzhang.com/devtools/2016/01/15/google-chrome-extension/

  4. Node.js 解析gzip网页(https)

    gzip网页指网页头字段Content-Encoding是gzip(GNU zip)内容编码方式.内容编码是指不丢失实体信息的前提下所进行的压缩. Node.js 代码如下: //========== ...

  5. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-人机界面如何快速调整大量控件的位置

    打开元素列表,然后直接从顶部按住Shift批量选中控件即可     更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.youku.com/acetaohai123   我的 ...

  6. Django——基于类的视图源码分析 二

    源码分析 抽象类和常用视图(base.py) 这个文件包含视图的顶级抽象类(View),基于模板的工具类(TemplateResponseMixin),模板视图(TemplateView)和重定向视图 ...

  7. 图解avaScript中this指向(超透彻)

    一个图讲清楚JavaScript中this指向: 说明: (1)严格模式下,禁止this关键字指向全局对象会报错. (2)闭包中的this对象具有全局性,因此通常指向window.  (3)优先级:n ...

  8. Photoshop之学习笔记(2) - 常用快捷键

    1.1024x768常用桌面分辨率2.点阵图(像素图).矢量图3.PPI 分辨率  DPI 打印输出的分辨率4.选框工具5.拾色器(默认H恢复色条 色相)6.Ctrl+D 取消选框工具7.Ctrl+S ...

  9. android Menory 小结

    不建议在Activity中使用static 变量,考虑使用Application.当然,static final例外 但Application也不要cache某个Activity使用的View,如果c ...

  10. QtAndroid具体解释(6):集成信鸽推送

    推送是我们开发移动应用经经常使用到的功能,Qt on Android 应用也会用到,之前也有朋友问过,这次我们来看看怎么在 Qt on Android 应用中来集成来自腾讯的信鸽推送. 有关信鸽的 S ...