Как укоротить createElement в javascript?

Question

[De YURII]

var div = document.createElement("div"),
                                    div2 = document.createElement("div"),
                                    div3 = document.createElement("div"),
                                    div4 = document.createElement("div"),
                                    div5 = document.createElement("div"),

Есть список для создания элементов, можно его как-то укоротить? Пробовал

var div = document.createElement("div"),
div1 = div1,
...

Answer 1

[Nwton]

Для чего? Можно так, до одной строки:

createDiv(5);

function createDiv(n){
	var div = [];
	for(var i = 0; i < n; i++){
		div.push(document.createElement('div'));
	}
	return div;
}

Comments

[De YURII]

думал, можно как-то изящней записать (покороче), ну раз через цикл то не смысла...

[Nwton]

DARWIN Yuri: можно и короче, но я не умею, подожди, кто-то даст ответ получше

Answer 2

[Stalker_RED]

Так достаточно коротко?

var d=document,c='createElement',e='div',div1=d[c](e),div2=d[c](e),div3=d[c](e),div4=d[c](e),div5=d[c](e);

https://jsfiddle.net/uuqwvxpo/

Еще можно так:

var div1 = document.createElement('div'),
div2 = div1.cloneNode(),
div3 = div1.cloneNode(),
div4 = div1.cloneNode(),
div5 = div1.cloneNode();

https://jsfiddle.net/7fvste8u/

И еще короче:

var c='cloneNode',
div1 = document.createElement('div'),
div2 = div1[c](),
div3 = div1[c](),
div4 = div1[c](),
div5 = div1[c]()

var c='cloneNode',d=div1=document.createElement('div'),div2=d[c](),div3=d[c](),div4=d[c](),div5=d[c]()

var d=div1=document.createElement('div'),c=()=>d.cloneNode(),div2=c(),div3=c(),div4=c(),div5=c()

var c=()=>document.createElement('div'),div1=c(),div2=c(),div3=c(),div4=c(),div5=c()

Горшочек, не вари!

Вообще, нужно искать какой-то баланс между краткостью и читаемостью. Вручную JS обжимать не модно, есть же готовые минификаторы.

Comments

[Дмитрий Лузанов]

Если именовать не divN а dN то получилось бы ещё короче

[Nwton]

как-то циферки к переменным дописывать не комильфо))

[De YURII]

Я думал, что можно выразить это без повторяющихся document.createElement, ну кроме цикла все так же получается, просто короче, я хотел изящней =) моя вина - изначально не верно выразился. Всем спасибо

Answer 3

[Ivan Bogachev]

я хотел изящней =)

Хм... если искать изящный, но при этом бессмысленный и беспощадный вариант решения этой задачи, - то можно прикрутить сюда генератор (никогда так не делайте):

let div = (function*() {
    while (true) yield document.createElement('div');
})();

let div1 = div.next().value,
    div2 = div.next().value;
    ....

Ну и демка на codepen на всякий случай.

Answer 4

[Сергей Соколов]

Коротко в смысле записи – сделайте алиас метода:

var dc = document.createElement.bind(document,'div');
var div1=dc(), div2=dc(), div3=dc();

Если есть список, вы говорите, то как-то так:

'div,div1,div2,div3,div4,div5'  // имена переменных через запятую
  .split(',') // сделали из строки массив, разбив по запятой
  .map( (e)=>{ this[e]=document.createElement("div")}) // наделали переменных в текущем контексте
;

То же для старых браузеров:

var context = this;
'div,div1,div2,div3,div4,div5'  // имена переменных через запятую
  .split(',')
  .map( function(e){ context[e]=document.createElement("div") })
;

Answer 5

[rPman]

Что может быть читабельнее этого:

function node(name){return document.createElement(name);}
var div1=node(n'div')
   ,div2=node(n'div')
   ,div3=node(n'div')
   ,div4=node(n'div');

p.s. избегайте ручное создание нод в проекте, пользуйтесь шаблонизаторами (их миллион) - готовые куски шаблонов храните тут же на странице, в теге < script type='text/html' >