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. 【angularJS】前后台分离,angularJS使用Token认证

    参考资料: [AngularJS系列(4)] 那伤不起的provider们啊~ (Provider, Value, Constant, Service, Factory, Decorator):htt ...

  2. JSON,字符串,MAP转换

    package com.tree.autotest.testcase.IAuditBillDetailService; import com.alibaba.fastjson.JSON;import ...

  3. 悟道—位IT高管20年的职场心经(读书笔记三)

    悟道--一位IT高管20年的职场心经 第三章 世事洞明皆学问 职场就是你的大半个世界 是你一辈子也读不完的一大本书 想明确一个道理. 看明确一件事儿, 你就向成功迈进了一步. 1.1  "四 ...

  4. spring配置,spring中的bean 的id不能相同

    lib下加入包 spring.jar commons-logging.jar src下添加 applicationContext.xml <?xml version="1.0" ...

  5. MongoDB密码设置(基于windows)

    参考文档:http://www.cnblogs.com/zengen/archive/2011/04/23/2025722.html   MongoDB部署到Windows上后是默认是无权限限制的的. ...

  6. Asp.Net WebApi服务端解决跨域方案

    1.特性方式 主要是继承ActionFilterAttribute,重写OnActionExecuted方法,在action执行后,给响应头加上一个键值对. using System.Web.Http ...

  7. hiredis学习整理

    hiredis安装 http://blog.csdn.net/aizquan/article/details/20777453 http://blog.csdn.net/zhwei_87/articl ...

  8. WPF入门教程系列一

    WPF入门教程 一.  前言  公司项目基于WPF开发,最近项目上线有点空闲时间写一篇基于wpf的基础教材,WPF也是近期才接触,学习WPF也是在网上查资料与微软的MSDN进行学习,写本博客的目为了温 ...

  9. Service#onStartCommand返回值解析

    Service#onStartCommand返回值解析 Service类有个生命周期方法叫onStartCommand,每次启动服务(startService)都会回调此方法.此方法的原型例如以下: ...

  10. Redis命令学习-string类型操作

    APPEND key value     假设key已经存在,而且为字符串.那么这个命令会把value追加到原来值的末尾.假设key不存在.首先创建一个空字符串,再运行追加操作.     返回值:返回 ...