遇到这种写法有什么其他的实现方式吗?

Question

在开发中总是会遇到这种需要创建DOM的需求,有没有什么其他的实现方式或者写法?(除了字符串拼接)

Answer 1

封装成工具函数不行吗？

function h(type, option, children) {
    type = typeof type === "string" ? type : "div";
    option = option instanceof Object ? option : {};
    children = Array.isArray(children) ? children : [];
    var dom = document.createElement(type);
    for (var key in option) {
        var val = option[key];
        switch (key) {
            case "style":
                for (var prop in val) {
                    var css = val[prop];
                    dom.style[prop] = css;
                }
                break;
            case "class":
                dom.className = val.join(" ");
                break;
            default:
                dom.setAttribute(key, val);
                break;
        }
    }
    for (var i = 0; i < children.length; i++) {
        var child = children[i];
        if (typeof child === "string") {
            child = document.createTextNode(child);
        }
        dom.appendChild(child);
    }
    return dom;
}
console.log(h("div", {
    id: "test",
    class: ["container"],
    style: {
        width: "100%",
        height: "50px",
        "text-align": "center",
        color: "green"
    }
}, [h("h1", {} ,["Segmentfault"])]));

Answer 2

cssText结合es6的``
style.cssText = width: ${w}px; height: ${y}px; position: absolution; ..........

Answer 3

${w}px
这样？

Answer 4

你这种结构推荐用innerHTML拼字符串吧

Answer 5

难得写前缀，直接copy咯

const b = document.createElement('div')
Object.assign(b.style, {
  width: '',
  height: ''
})