如何让自定义类实例对象可直接被jQuery append()方法追加

jQuery的append底层走的是统一的domManip处理逻辑，所有传入的参数都会先被jQuery包装为jQuery对象再执行追加。除了原生DOM节点、HTML字符串、jQuery对象之外，只要传入的对象符合jQuery的节点识别规则，就可以被直接处理，不需要手动调用取值方法。

你之前尝试的html方法不生效，是因为jQuery根本没有把html方法作为外部对象的适配识别接口——html()本身是jQuery实例用来读写自身内部HTML的方法，和外部对象识别逻辑无关。

你可以选下面两种方案实现需求，兼容1.8+到3.x的所有主流jQuery版本： #

方案1：模拟jQuery对象的类数组结构 #

jQuery对象本身就是典型的类数组：维护一个length属性标记包含的节点数量，从0开始的数字索引位依次存储对应的原生DOM节点。只要你的类实例符合这个结构，jQuery就会把它当成节点集合直接处理：

class Component {
    name;
    length = 0;

    constructor(name) {
        this.name = name;
        // 把生成的原生DOM节点挂到索引位
        this[0] = document.createElement('input');
        this[0].setAttribute('name', this.name);
        // 更新类数组长度
        this.length = 1;
    }
}

// 直接传实例就能正常追加
$('body').append(new Component('example'));

如果组件需要返回多个DOM节点，只要按顺序把节点挂到this[0]、this[1]……的位置，同步更新length的数值即可。

方案2：实现toArray接口返回节点数组 #

如果不想手动维护类数组的索引和长度，可以直接给类加toArray方法，返回包含所有待追加原生DOM节点的数组，jQuery在包装参数时会自动识别这个方法，取出节点完成追加：

class Component {
    name;

    constructor(name) {
        this.name = name;
    }

    toArray() {
        const input = document.createElement('input');
        input.setAttribute('name', this.name);
        return [input];
    }
}

// 直接传实例即可生效
$('body').append(new Component('example'));

注意：不管用哪种方案，都要返回原生DOM节点，不要直接返回jQuery对象，否则会出现多层jQuery包装的异常。如果用jQuery方法生成节点，记得取[0]拿到原生节点再返回。

内容的提问来源于stack exchange，提问作者maduranma