Кратчайший способ создать 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); 

Это будет самый короткий путь к выполнению его снова и снова, все еще имея некоторый порядок внутри вашего кода, ИМО.

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