主要问题：

在刚开始创建了这个函数之后，使用的时候，总是会出现一个问题，就是按照正常步骤给一个ID选择器添加子节点的时候正常，但是到了给一个class选择器的元素添加的时候始终只能添加一个。

下面是我自己定义的Append（）函数：

/**

         * 向现有的元素节点中添加dom节点(对使用选择器获取的一系列元素都添加孩子节点child)

         * @param child，这里创建的实际上是一个JQuery对象

         */

        append: function (child) {

            var doms = typeof child === 'string' ? $(child) : $(child[0]),

                arr = Array.prototype.slice.call(doms);

           for (var i = 0; i < this.length; i++){

                for (var j = 0; j < doms.length; j++){

                    // 注意这里的操作， 由于在每次添加一个新的元素之后， this的长度就会增加，因此这里在修改之前先把this.length修改一下

                    this[i].appendChild(doms[j]);

                }

            }

        },

测试的代码如下：

下面是按照原生的添加方法一步步添加一个DOM元素到指定节点的过程：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="parentNode"></div>

<div class="box0">111</div>

<div class="box1">222</div>

<div class="box2">555</div>

<div class="box3">444</div>

<div class="box4">555</div>

<div class="game">111</div>

<div class="game">222</div>

<div class="game">333</div>

<div class="game">444</div>

<div class="game">555</div>

<div class="name">111</div>

<div class="name">222</div>

<div class="name">333</div>

<div class="name">444</div>

<div class="name">555</div>

</body>

</html>

<script src="xframe006.js"></script>

<script>

    var arr = [1, 2, 3]

    console.log(arr);

    var res = Array.prototype.slice.call(arr);

    console.log(res);

    //1. 创建一个DOM元素节点(这个DOM实际上是一个我自己封装的JQuery对象)

    var dom = $.create('span', {name: '52tech'}, '<a href="www.52tech.tech"></a>');

    // DOM框架完整测试

    $('#parentNode').append(dom);

    // append()测试: 主要问题, 如果一次向要给一个集合添加多个就不成功

    /*var res = document.querySelectorAll('.box1');

    for (var i = 0; i < 3; i++){

        dom = document.createElement("p");

        for (var j = 0; j < 3; j++){

            res[j].appendChild(dom);

        }

    }*/

    // 每一个DOMs里面存储的是一个HTMLCollection

    var doms = [];

    for (var i = 0; i < 5; i++) {

        doms.push(

            $.$class('box' + i)

        );

    }

    // 第一种方式：开始遍历每一个元素

    doms.forEach(function (element) {

        var dom = $.create('span', {name: '52tech'}, '<a href="www.52tech.tech"></a>');

        element[0].appendChild(dom[0]);

    });

    // 换一种方式：给一个类标签添加子节点, 里面存放的每一个元素都是一个HTMLcollection(完全OK)

    var res = $('.game');

    Array.prototype.slice.call(res).each(function () {

        var dom = $.create('span', {name: '52tech'}, '<a href="www.52tech.tech"></a>');

        this.appendChild(dom[0]);

    });

    // 第三种方式的实现

    var res = $('.name');

    // 注意在使用append函数的时候，每次都需要重新创建一个DOM元素，因此这个DOM Node节点是不能放在外部的  error

    var dom = $.create('span', {name: '52tech'}, '<a href="www.52tech.tech"></a>');

    Array.prototype.slice.call(res).each(function () {

        dom = $.create('span', {name: '52tech'}, '<a href="www.52tech.tech"></a>');

        this.appendChild(dom[0]);

    });

    // 创建一个DOM节点，添加到根节点

    $('.name').each(function () {

        // DOM的创建必须在这个函数内部创建，否则会使用错误！！！

        var dom = $.create('span', {name: '52tech'}, '<a href="www.52tech.tech"></a>');

        this.append(dom[0]);

    });

    // appendTo()测试

    var dom = $.create('span', {name : '52tech'}, '<a href="www.52tech.tech"></a>');

    dom.appendTo(document);

</script>

最终发现，在添加的时候，如果只创建了一个DOM元素，那么到最后始终能添加成功的就是只有一个的，但是，如果每次在添加之前创建了和获取的class的DOM元素相同数量的节点，就会添加成功，这个好像和C++/Java里面的创建对象的方式还是有些区别的，一个创建的元素是不能共享的！

【JavaScript框架封装】在实现一个自己定义类似于JQuery的append()函数的时候遇到的问题及解决方案的更多相关文章

  1. 【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建

    /* * @Author: 我爱科技论坛 * @Time: 20180715 * @Desc: 实现一个类似于JQuery功能的框架 * V 1.0: 实现了基础框架.事件框架.CSS框架.属性框架. ...

  2. 【JavaScript框架封装】实现一个类似于JQuery的DOM框架的封装

    // DOM框架(选择器框架) (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 向现 ...

  3. 【JavaScript框架封装】实现一个类似于JQuery的缓存框架的封装

    // 缓存框架 (function (xframe) { /** * 实现了缓存框架的临时存储功能(内存存储) * @type {{data: Array, get: (function(*): *) ...

  4. 【JavaScript框架封装】实现一个类似于JQuery的动画框架的封装

    // 动画框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({}); // 不需要参与链式访问的 ...

  5. 【JavaScript框架封装】实现一个类似于JQuery的选择框架的封装

    // 选择框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({}); // 不需要参与链式访问的 ...

  6. 【JavaScript框架封装】实现一个类似于JQuery的CSS样式框架的封装

    // CSS 样式框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)[只要是需要使用到this获取到的元素集合这个变量的时候, ...

  7. 【JavaScript框架封装】实现一个类似于JQuery的事件框架的封装

    // 事件框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 实现一个浏览器的基本 ...

  8. 【JavaScript框架封装】实现一个类似于JQuery的属性框架的封装

    // 属性框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 获取/设置某一个元素 ...

  9. 【JavaScript框架封装】实现一个类似于JQuery的内容框架的封装

    // 内容框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * .html()用为读 ...

随机推荐

  1. poj 1523 求割点把一个图分成几个联通部分

    #include<stdio.h> #include<string.h> #define N 1100 struct node { int u,v,next; }bian[N* ...

  2. 怎样手动的干净的删除linux上的ORACLE数据库

    近期在用VMWARE虚拟机做ORACLE的数据库实验.我们都知道在WINDOWS上,我能够到加入删除程序里去自己主动删除已经安装的全部的应用程序.可是在LINUX上没有这个服务能够进行自己主动的删除. ...

  3. Swift学习——类的定义，使用，继承，构造等（五）

    Swift学习--类的定义,使用.继承,构造等(五) 类的使用说明 1 使用class和类名来创建一个类名,比如: class student 2 类中属性的声明和常量和变量一样,唯一的差别就是他们的 ...

  4. UVA10862 - Connect the Cable Wires（递推 + java的大数）

    UVA10862 - Connect the Cable Wires(递推 + java的大数) 题目链接 题目大意:给你n座房子位于一条直线上,然后仅仅给你一个cable service.要求每座房 ...

  5. 怎样又一次编译linux内核

    linux作为自由软件.在广大爱好者的支持下,内核版本号不断更新. 新的内核修订了就得内核的bug,并添加了很多新的特性.假设用户须要使用这些新的特性或者依据自己的系统量身定做一个更高效或更稳定的内核 ...

  6. luogu1120 小木棍【数据加强版】 暴力剪枝

    题目大意 乔治有一些同样长的小木棍,他把这些木棍随意砍成几段,直到每段的长都不超过50.现在,他想把小木棍拼接成原来的样子,但是却忘记了自己开始时有多少根木棍和它们的长度.给出每段小木棍的长度,编程帮 ...

  7. Windows 10 MBR转GPT分区

    注意:分区有风险,操作需谨慎,提前备份好数据. 说明: 1.有“系统保留”的分区,可以直接删除,用来做GPT分区的UEFI启动分区. 2.没有“系统保留”分区的,需要在分区最前面调整分区大小,留出30 ...

  8. Cookies操作类

    实现代码: //声名一个数据集合 var listString = new List<string>() { "a", "b", "c&q ...

  9. Java-Maven：POM百科

    ylbtech-Java-Maven:POM百科 Maven是以项目为中心的设计.POM(project object model)是Maven对一个单一项目的描述.没有POM的话,Maven是毫无用 ...

  10. Oracle 11g RAC for LINUX rhel 6.X silent install（静默安装）

    一.前期规划 1.硬件环境 CPU: Intel(R) Xeon(R) CPU E7-4820 v4 @ 2.00GHz  8*10核 内存:512GB OCR:2147*5 MB DATA1:2TB ...