javascript - 动态 DOM 操作函数 : How To Improve It, 我应该使用它吗？它在这里做什么？

Question

好吧，我对编程有相当透彻的了解(CS 学士)，但 Web 开发绝对是一场噩梦，我问过的人都不能给我任何真实信息我应该在这里做。他们中的大多数人会说，“哦，看那个。漂亮。”这就是它的结束。

我一直在做很多带有动态内容的宠物项目，为了加快这个过程，我写了一个函数来创建元素并将元素插入到 DOM 中。它相当简单，并不十分优雅，但可以完成工作。

正如标题所说，我正在寻找改进方法，也许是一种更好的既定做法，然后我对实现它有疑问。

代码如下:

app.newDOMObject = function (type, attributes, values, parentNode, innerHTML) {
    if (type) {
        var element = document.createElement(type);
        if (attributes && values) {
            if (attributes.length == values.length && attributes.length > 0) {
                for (var i = 0; i < attributes.length; i++) {
                    element.setAttribute(attributes[i], values[i]);
                }
            }
        }
        if (innerHTML) {
            element.innerHTML = innerHTML;
        }
        if (parentNode) {
            parentNode.appendChild(element);    
        }
        return element;
    }
}

然后当我想使用它时，我会执行以下任一操作:

var thing = app.newDOMObject("div", ["id"], ["thing"], document.body, "thing1");

或者只是

app.newDOMObject("div", ["id"], ["thing"], document.body, "thing2");

取决于我以后是否需要引用它。

我的最后一个问题是:thing2 返回的元素会发生什么情况，因为我没有将它分配给变量？我显然应该知道这一点，但它是否在全局范围内困惑？它知道我不使用它，就把它扔掉吗？没有原型(prototype)设计或任何东西，它只是返回一个已经在 DOM 中的元素。它去了哪里，为什么它没有错误地工作？ :/

我确定我应该读一本关于高级 JavaScript 机制的书，但我实际上并不知道我在问什么，并且用五分钟谷歌搜索关键字，如“表达式”和“声明”以及“返回非变量” "几乎和您想象的一样有用。

我找到的关于这个问题的大多数帖子都是推荐的模板库，但我想尽可能避免使用它们。

如有任何想法，我们将不胜感激!

感谢您的帮助!-泰勒

Answer 1

不存储返回值与在其他语言中具有类似的效果，您只是不将其保存在任何地方，在大多数情况下它就消失了。

在您的情况下，它无论如何都会被保留，因为您将它附加到您的参数 parentNode，因此它或多或少取决于该 parentNode 的来源以及您之后对其进行的操作。

在您的示例函数调用中，您附加到文档主体，这意味着它将保留在当前文档/网站的 DOM 中。您不需要保留对它的引用以便稍后使用它，您还可以遍历 DOM 并获取对该节点的新引用。

要获得有关 DOM 操作的一些灵感，我建议您查看 jQuery 框架及其 Manipulation API section .