最短路径

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

什么是做到以下几点[...]

最短的路

我们可以想象一种情况，其中divalr eady在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; 
} 

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

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