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. 实现Xshell断开连接情况下Linux命令继续执行

    1.将原命令语句改为:nohup 命令语句 & 2.回车执行,再回车,窗口中会显示一个进程号 3.如果中途想关闭,可执行:kill -9 进程号.如果想查看命令执行情况,可执行:cat noh ...

  2. 表单提交时上传图片 表单ajax提交

    页面 <script type="text/javascript" src="js/jquery.form.js"></script>& ...

  3. Unity异常警告错误处理方法

    原地址:http://www.haogongju.net/art/2591936 1.  The AnimationClip 'cube1_anim' used by the Animation co ...

  4. 为InfiniBand而哭泣

    自古就不乏还没有開始就结束的那种精彩.我称之为殉道者.InfiniBand就是当中之中的一个.尽管它有陨落之势,我依旧要为它鼓掌. 假设说以太网旨在将主机联系在一起,那么InfiniBand的初衷就是 ...

  5. linux下统计程序/函数运行时间(转)

    一. 使用time 命令 例如编译一个hello.c文件 #gcc hello.c -o hello 生成了hello可执行文件,此时统计该程序的运行时间便可以使用如下命令 #time ./hello ...

  6. android 开机自启动的几种方法,监听不到RECEIVE_BOOT_COMPLETED的处理办法

    第一种:  监控RECEIVE_BOOT_COMPLETED,即开机启动事件 另外一种: 监控sd卡mount事件  开机总会扫描sd卡吧? 监控sd卡事件也有类似开机启动效果.特别app安装在sd卡 ...

  7. js canvas画柱状图 没什么高端的 就是一篇偶尔思路的

    公司项目要用js画柱状图,本来想用个插件吧 chart.js 忽然一想 我们也用不了那么大的插件.自己写个吧,也能看看自己那点数学水平能够不! 有几个小亮点吧 1.函数x 和 函数y 对坐标进行了转化 ...

  8. varchar2 和varchar区别

    1.varchar2把所有字符都占两字节处理(一般情况下),varchar只对汉字和全角等字符占两字节,数字,英文字符等都是一个字节:2.VARCHAR2把空串等同于null处理,而varchar仍按 ...

  9. Linux-进程内存占用情况

    可以直接使用top命令后,查看%MEM的内容.可以选择按进程查看或者按用户查看,如想查看oracle用户的进程内存使用情况的话可以使用如下的命令: (1)top top命令是Linux下常用的性能分析 ...

  10. Android模拟器Genymotion安装apk

    一.下载apk 选择你需要安装的apk进行下载,下载完以后放在与adb.exe同一目录下: 看我的 二.安装apk遇到的问题 开启Genymotion模拟器,然后cmd到你的platform-tool ...