DOM 元素创建者

Question

我正在尝试使用 vanilla JS 创建一个函数，它将：

创建一个新的 DOM 元素
为其分配一个 Class 名称
将它放在 DOM 中，要么附加到现有的 div 中，要么在需要时使用 "insertBefore()"

我想出了以下有点不雅的解决方案：

    function createDomElem(elem, className, parent, refElement, type) {
        var a = document.createElement(elem);

        if (type == "append") {
            document.querySelector(parent).appendChild(a);
        } else if (type == "insert") {
            document.querySelector(parent).parentNode.insertBefore(a, refElement)
        }
        a.className = className;
    };

我对这个解决方案的问题是

要传递的参数太多
如果不传递 "insert" 那么你不需要 refElement 并且为了避免 "type" 被误认为 "refElement" 你必须传递 "refElement" 作为 "null" 然后将类型定义为 "append"

所以我的问题是我在哪里可以简化此功能以使其在我的程序中变得更有用？

我也梦想能够在这个函数中将 child div 推入新创建的 div 中，定义有多少 child divs 你会想要然后使用 for 循环来追加或插入这些。不过，将其置于新功能中会更好吗？

Answer 1

我会将代码分成两部分，因为它们必须分开 关注点。我使用类似于以下的内容来创建 DOM 元素：

var DomFactory = (function (document) {

    var api = {
        element: function (name, attributes) {
            var el = document.createElement(name);

            if (attributes) {
                for (var key in attributes) {
                    if (attributes.hasOwnProperty(key)) {
                        el.setAttribute(key, attributes[key]);
                    }
                }
            }

            return el;
        },

        div: function (attributes) {
            return api.element('div', attributes);
        }
    };

    return api;

}(window.document));

用法：

var div = DomFactory.div({ 'class': 'hero' });
var table = DomFactory.element('table', { 'class': 'table table-bordered' });

那么对于定位，你可以有一个广义的定位函数：

function attach(source, target, position) {
  switch (position) {
    case 'before': {
      target.parentNode.insertBefore(source, target);
      break;
    }
    case 'after': {
      if (target.nextSibling) {
        target.parentNode.insertBefore(source, target.nextSibling);
      } else {
        target.parentNode.appendChild(source);
      }
    }
  }
}

用法：

attach(table, div, 'before');

DOM 元素创建者

DOM element creator

html

javascript

dom