Javascript DOM树创建

为了编写XML、HTML或任何其他树状结构，我曾经制作了一个类似DOM的小型python库，其中定义了两个主要函数：

• grow（父\u实例，子\u标记）

  返回新创建和附加的

  child\u实例

• attach（parent\u实例，text）

  追加文本并返回

  parent\u实例

写树成了一件轻而易举的事

javascript新手，（发现

$（“”）

丑陋）我再次尝试在DOM上实现这个，而jquery。。。我是在重新发明轮子吗？它怎么可能更像javascriptic呢

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

---

编辑@ammarces:

恶心>\我开始理解为什么在您的第一个示例中，

.appendChild（）

仍然出现错误<首先使用jQuery选择的父对象（使用

.append（）

）调用code>grow（），并返回经典DOM对象（使用

.appendChild（）

）

---

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

这不是要重新发明轮子或更“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);
}

---

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

$.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]);
}

var ord_list=[“第一”、“第二”、“第三”]；
var n_table=$（“#序数”）
对于（变量i=0；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>

1首先
2秒
第三

干净、不引人注目，我将向jQuery开发人员推荐：D

---

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

我太喜欢“应该有一种——最好只有一种——显而易见的方法来实现它。”：）。当我删除

$（

在我的示例中，我得到了

类型错误：parent.append不是函数搜索：42

，父项通过

$（“#id”）获得

selector…@yota，我不明白。你在上面的代码中遇到了类型错误吗？@yota，我不小心与append for jQuery和appendChild for javascript混在一起了。我更新了我的答案。@yota，我同意，javascript和jQuery混在一起有时会很可怕。不过，纯javascript版本现在应该可以工作了。我很挑剔，但是jQue基于ry的grow（）不返回子级，而是返回父级：）