Question

为了编写XML，HTML或任何其他树状结构，我曾经创建了一个类似DOM的python库，其中包含两个主要功能：

grow(parent_instance, child_tag)，返回新创建并附加的child_instance
attach(parent_instance, text)附加文字并返回parent_instance

写树变得轻而易举。

javascript中的新手，（发现$('<div></div>')丑陋）我试图在DOM和jquery之上再次实现这个......我是否重新发明了轮子？怎么可能更具javascriptic？

function grow(parent, tagName) {
    var node = $(document.createElement(tagName));
    parent.append(node);
    return node;
}

编辑@AmmarCSE：

yuck＆gt; _＆lt;我开始理解为什么在第一个示例中我仍然遇到.appendChild()错误...首先使用jQuery选择的父级（使用grow()）调用.append()并返回经典DOM object，（使用.appendChild()）。

我必须找到一种保持可嵌套性的方法：）

Answer 1

它不是重新发明轮子或更多'javascriptic'。您只需要很多选项来实现相同的目标。

使用Javascript：

function grow(parent, tagName) {
    var node = document.createElement(tagName);
    //notice, the jQuery wrapper was removed as it is not needed

    parent.appendChild(node);
    return node;
}

function attach(parent_instance, text) {
    parent_instance.innerHTML = text;
    return parent_instance;
}

jQuery的：

function grow(parent, tagName) {
    return $(parent).append($(document.createElement(tagName)));
}

function attach(parent_instance, text) {
    return $(parent_instance).text(text);
}

Answer 2

我找到了完美答案，所以我分享了。

$.fn.grow = function (name) {
    var child = $(document.createElement(name));
    this.append(child);
    return child;
};

它添加了一个jQuery方法并启用了这种程序树构建：

var ord_list = ["first", "second", "third"];
var n_table = $('#ordinals')
for (var i=0 ; i < ord_list.length ; i++) {
    n_tr = n_table.grow('tr');
    n_td = n_tr.grow('td');
    n_td.text(i);
    n_td = n_tr.grow('td');
    n_td.text(ord_list[i]);
}

产生：

<table>
    <tr><td>1</td><td>first</td></tr>
    <tr><td>2</td><td>second</td></tr>
    <tr><td>3</td><td>third</td></tr>
</table>

干净，不引人注目，我会向jQuery开发者提出建议：D

.attach（）没用，因为.text（）已经存在（thx @AmmarCSE）

DOM树创建

2 个答案: