全面理解appendChild方法

孙吉亮发布于2019-08-20 12:26 / 1594人阅读

摘要：示例代码在内容末尾插入节点运行前运行后如果要插入的节点已经在文档中则先剪切再插入。运行前运行后如果的参数是一个节点对象，则插入的标签的内容会正常运行。运行前运行后更多本知识块的和源文件在上，点击这里查看参考资料和有什么区别

Node.prototype.appendChild

写于: 2016-11-19 | 更新于: 2017-1-3

W3C 标准

WHATWG: appendChild

定义和用法

节点的appendChild方法用于在内容末尾插入节点，如果要插入的节点已经在文档中则先剪切再插入。

语法：node.appendChild()

参数：节点对象（a node object）

返回值：插入的节点对象在文档中的引用

属性描述

appendChild方法可枚举可重写可配置。

// Object.getOwnPropertyDescriptor(Node.prototype, "appendChild") 的结果如下：
var result = {
    configurable: true,
    enumerable: true,
    writable: true,
    value: Node.prototype.appendChild
}

注意事项

如果appendChild的参数是一个script节点对象，则插入的script标签的内容会正常运行。但只有第一次插入才会运行。

示例代码

在内容末尾插入节点

// appendChild.js
var wrap = document.querySelector("js-wrap"),
    newP = document.createElement("p");
    
newP.textContent = "jszhou";
wrap.appendChild(newP);



wrap



wrap
    jszhou

如果要插入的节点已经在文档中则先剪切再插入。

// cut.js
var $ = document.querySelector.bind(document),
    outer = $(".js-outer"),
    wrap = $(".js-wrap");

wrap.appendChild(outer);



outer
wrap



wrap
    outer

如果appendChild的参数是一个script节点对象，则插入的script标签的内容会正常运行。但只有第一次插入才会运行。

// appendScript.js
var wrap = document.querySelector(".js-wrap"),
    newScript = document.createElement("script");

newScript.innerHTML = "wrap.append("jszhou")";
wrap.appendChild(newScript);



wrap



wrap
    
    jszhou

把文档片段节点插入文档中是先剪切文档片段节点的所有子节点然后再一起插入文档中。文档片段节点也可以插入文档片段节点中，过程和插入文档中是一样的。

// documentFragment.js
var wrap = document.querySelector(".js-wrap"),
    docFragWrap = document.createDocumentFragment(),
    docFrag = document.createDocumentFragment(),
    h2 = document.createElement("h2"),
    p = document.createElement("p");

h2.textContent = "head";
docFragWrap.appendChild(h2);

p.textContent = "content";
docFrag.appendChild(p);

docFragWrap.appendChild(docFrag);
console.log(docFrag.childNodes.length); // 0

wrap.appendChild(docFragWrap);
console.log(docFragWrap.childNodes.length); // 0








    head
    content

本知识块的markdown和demo源文件在github上，点击这里查看

参考资料

https://developer.mozilla.org...

http://www.w3schools.com/jsre...

element.innerHTML和appendChild有什么区别

云服务器 GPU云服务器全面理解 appendChild 全面分析全面变革

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80980.html

前端应该知道的基本知识

摘要：所有我们不熟悉或者没有掌握的知识皆可称之为知识盲区，有知识盲区并不可怕，针对知识盲区去学习即可。只有这样，我们才会准确知道自己的知识盲区所处何处，以及发现更多的知识盲区。节点对应的对象是，其他的具体节点对象全都是继承自对象。前端时间在部门内进行分享，准备素材时偶然发现下面的一个现象，因为和当时分享的主题无关，就先记下来了，事后重新审视，并把一些思考记录如下：一、问题 HTML： ...

2bdenny 2019-08-26 12:20 评论0 收藏0
一次排查页面重复请求的经历

摘要：前段时间重构一个页面，页面中存在通过第三方代码插入的动态广告正常的产品需求，上线后发现第三方的广告资源存在重复请求的问题。所以，同一个请求会触发两次的原因页面加载时渲染元素会触发第一次请求，执行代码导致重新渲染触发第二次请求。前段时间重构一个页面，页面中存在通过第三方JavaScript代码插入的动态广告（正常的产品需求），上线后发现第三方的广告资源存在重复请求的问题。由于控制广告插...

notebin 2019-08-02 11:47 评论0 收藏0
一次排查页面重复请求的经历

摘要：前段时间重构一个页面，页面中存在通过第三方代码插入的动态广告正常的产品需求，上线后发现第三方的广告资源存在重复请求的问题。所以，同一个请求会触发两次的原因页面加载时渲染元素会触发第一次请求，执行代码导致重新渲染触发第二次请求。前段时间重构一个页面，页面中存在通过第三方JavaScript代码插入的动态广告（正常的产品需求），上线后发现第三方的广告资源存在重复请求的问题。由于控制广告插...

hightopo 2019-08-23 12:30 评论0 收藏0
深入理解JavaScript系列7:S.O.L.I.D五大原则之开闭原则

摘要：前言本章我们要讲解的是五大原则语言实现的第篇，开闭原则。该代码有一个限制，就是如果再增加一个类型的话，那就需要再次修改里的条件语句，这明显违反了开闭原则。关于本文本文转自大叔的深入理解系列。前言本章我们要讲解的是S.O.L.I.D五大原则JavaScript语言实现的第2篇，开闭原则OCP（The Open/Closed Principle ）。开闭原则的描述是： Softwar...

Cheriselalala 2019-08-19 17:22 评论0 收藏0