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. solr6.6 solrJ索引富文本(word/pdf)文件

    1.文件配置 在core下面新建lib文件夹,存放相关的jar包,如图所示: 修改solrconfig.xml <lib dir="${solr.install.dir:../../. ...

  2. Quartz任务监听器

    在Quartz框架提供了JobListener接口,可在任务执行前.任务被拒绝及任务执行完成后实现对任务的拦截,该接口的声明如下: public interface JobListener { /** ...

  3. nmap小技巧[1] 探测大网络空间中的存活主机

    url: nmap是所有安全爱好者应该熟练掌握的扫描工具,本篇介绍其在扫描大网络空间时的用法. 为什么要扫描大网络空间呢? 有这样的情形: 内网渗透   攻击者单点突破,进入内网后,需进一步扩大成果, ...

  4. unity3d NGUI 本地化 多语言

    原地址:http://cl314413.blog.163.com/blog/static/1905079762014421115528670/ NGUI的本地化操作: Localization UIL ...

  5. Android-RelativeLayout布局技巧(一)

    如果有一个需求是这样的,在标题中的右上角有一个button <?xml version="1.0" encoding="utf-8"?> <L ...

  6. sencha touch结合webservice读取jsonp数据详解

    sencha touch读取jsonp数据主要依靠Ext.data.JsonP组件,在mvc的store文件中定义代码如下: Ext.define('eparkapp.store.ParksNearb ...

  7. oracle常用函数使用大全 Oracle除法(转)

    http://blog.csdn.net/chenmeng2192089/article/details/9155625 一.运算符算术运算符:+ - * / 可以在select 语句中使用连接运算符 ...

  8. __block 和__weak 区别及使用

    API Reference对__block变量修饰符有如下几处解释: //A powerful feature of blocks is that they can modify variables ...

  9. 解决window10系统电脑插入耳机之后没有声音的问题

    其实办法也是从百度百科上查到的 ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄     可能是因为自己某个不小心的操作更改了设置 1. 首先要点开设置按钮,在搜索栏输入控制面板 (当然知道控制面板在哪里的小伙伴就不用 ...

  10. 牛散NO.3:MACD放之四海 假作真时真亦假

    大宗商品日线“异曲同工夺命勾魂枪” 话说有实战意义的技术在任何资本市场里都能产生出神奇的效果.不能说放之四海皆准,但至少起到触类旁通的“牵强”吧.大宗商品特别是在国际市场交易的大宗 商品由于是来自各方 ...