创建 DIV 的最短方法

Question

执行以下操作的最短方法是什么：

var div = document.createElement('div');
div.className = 'divClass';
div.innerHTML = 'Div Content';

...没有任何外部库

Answer 1

class Div {
    constructor(className, innerHTML) {
        let div = document.createElement("div");
        div.className = className;
        div.innerHTML = innerHTML;

        return div;
    }
}
let innerHTML = "<a href=\"this.html\">LOL</a>"
new Div(divClass, innerHTML);

这将是一次又一次执行此操作的最短方法，同时在您的代码中仍然有一些顺序，IMO。

Answer 2

写一个函数在一行中完成：

function tag(tagNameAndClass, innerHTML) {
    var parts = (tagNameAndClass || 'div').split(/\./g);
    var elem = document.createElement(parts.shift());
    elem.className = parts.join(' ');
    if (innerHTML) elem.innerHTML = innerHTML;
    return elem;
}

使用示例：

tag('div.divClass', 'Div Content') // <div class="divClass">Div Content</div>
tag('.class-one.class-two', 'Content') // <div class="class-one class-two">Content</div>
tag('h1.super', 'My Super Heading') // <h1 class="super">My Super Heading</h1>

Answer 3

What would be the shortest way to do the following [...]

我们可以想象这样一种情况，div已经存在DOM中，而CSS样式规则display:none 确保它在可见文档流中不存在。

javascript 中的以下单行将使元素重新出现在可见文档流中：

document.getElementsByClassName('divClass')[0].style.display = 'block';

Answer 4

可能是迄今为止我想到的最好的解决方案：

var el = function(type,props,appends){
    var el = document.createElement(type);
    if(props) for(var x in props) el[x] = props[x];
    if(appends) for(var x in appends) el.appendChild(appends[x]);
    return el;
}

然后在使用它时（使用 header 和 body 示例创建弹出窗口）：

$title  = el('div',{className:'title',innerHTML:'Item Title'});
$remove = el('div',{className:'remove',innerHTML:'X'});
$header = el('div',{className:'header'},[$title,$remove,el('div',{className:'clear'})]);
$body   = el('div',{className:'body',innerHTML:'body'});

$el = el('div',{className:'item'},[$header,$body]);

创建 DIV 的最短方法

Shortest way to create a DIV

html

javascript

shorthand