Dejurin
@Dejurin
Software engineer

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

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,
...
  • Вопрос задан
  • 345 просмотров
Решения вопроса 2
@Nwton
Для чего? Можно так, до одной строки:
createDiv(5);

function createDiv(n){
	var div = [];
	for(var i = 0; i < n; i++){
		div.push(document.createElement('div'));
	}
	return div;
}
Ответ написан
Stalker_RED
@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 обжимать не модно, есть же готовые минификаторы.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
sfi0zy
@sfi0zy Куратор тега JavaScript
Creative frontend developer
я хотел изящней =)

Хм... если искать изящный, но при этом бессмысленный и беспощадный вариант решения этой задачи, - то можно прикрутить сюда генератор (никогда так не делайте):
let div = (function*() {
    while (true) yield document.createElement('div');
})();

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

Ну и демка на codepen на всякий случай.
Ответ написан
Комментировать
sergiks
@sergiks Куратор тега JavaScript
♬♬
Коротко в смысле записи – сделайте алиас метода:
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") })
;
Ответ написан
Комментировать
@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' >
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы