最短路徑

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