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);

这是在您的代码中仍然有一些订单的情况下，一次又一次地执行此操作的最短路径。

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

执行以下[...]
的最短路径是什么？

我们可以想象DOM中div 已经存在的情况，而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;
}

然后在使用它时（创建带有标题和正文示例的弹出窗口）：

$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的最短路径

4 个答案: