Блог

Главная - Вопросы по программированию - Как эффективно создавать и добавлять несколько элементов dom

Как эффективно создавать и добавлять несколько элементов dom

#javascript #html #dom #domdocument #elements

#javascript #HTML #dom #domdocument #элемент

Вопрос:

Я создаю 10 кнопок в DOM и хочу посмотреть, есть ли более эффективный способ их создания, потому что кажется странным вызывать createElement и appendChild 10 раз. 

 <script>
function makeAlertButtons () {
  var container = document.createElement("div")
  container.setAttribute('id', "container")
  document.getElementsByTagName('body')[0].appendChild(container)
  for (var x = 1; x <=10; x  ) {
    var butt = document.createElement("button")
    butt.appendChild(document.createTextNode(x))
    document.getElementById("container").appendChild(butt)
  }
  document.getElementById("container").addEventListener('click', function (e) {
    alert(e.target.textContent)
  })
}
makeButtons()
</script>

Комментарии:

1. Нет, то, что вы делаете, прекрасно, но вы могли бы переместить добавление контейнера после цикла, таким образом, вы не добавляете к фактическому документу десять раз при добавлении кнопок, вы просто добавляете их к элементу контейнера в памяти, а затем добавляете все это в DOM один раз.

2. Это не работает, когда я перемещаю добавление контейнера за пределы цикла, потому что тогда он добавит только 10-ю кнопку

3. Но это уже вне цикла, прямо перед этим, я просто предлагаю вам сделать это после цикла вместо этого.

Ответ №1:

Вы можете оптимизировать свой код, повторно используя переменную контейнера и перемещая 

 document.getElementsByTagName('body')[0].appendChild(container);

после цикла

 function makeAlertButtons () {
  var container = document.createElement("div")
  container.setAttribute('id', "container")
 
  for (var x = 1; x <=10; x  ) {
    var butt = document.createElement("button")
    butt.appendChild(document.createTextNode(x))
    container.appendChild(butt)
  }

  document.getElementsByTagName('body')[0].appendChild(container);
  container.addEventListener('click', function (e) {
    alert(e.target.textContent)
  })
}

makeAlertButtons();

Ответ №2:

«более эффективно»? Было бы более эффективно во время выполнения, если бы DOM был просто создан с использованием HTML. Если вы хотите, чтобы JavaScript был более эффективным, тогда вы захотите кэшировать свой JavaScript в браузере клиента, используя внешний <script type='text/javascript' src='yourJavaScriptPage.js'></script> тег, подобный вашему <head> . Я включаю сюда некоторый код, который может вас чему-то научить:

 var pre = onload, doc, bod, htm, C, T, E, makeAlertButtons; // if using technique on multiple pages change pre var
onload = function(){ // window.onload Event
if(pre)pre(); // if previous onload execute it

doc = document; bod = doc.body; htm = doc.documentElement;
C = function(e){
  return doc.createElement(e);
}
T = function(n){
  return doc.getElementsByTagName(n);
}
E = function(id){
  return doc.getElementById(id);
}
makeConsoleButtons = function(count){
  var container = C('div');
  container.id = 'container';
  for(var i=1,l=count 1; i<l; i  ){
    var butt = C('input');
    butt.type = 'button'; butt.value = i;
    butt.onclick = function(){ // note lazy style will overwrite - but it's faster to type
      console.log(this.value); // alert can create problems in old IE
    }
    container.appendChild(butt);
  }
  bod.appendChild(container);
}
makeConsoleButtons(10);

} // end window.onload

Надеюсь, вы чему-то научились.

Комментарии:

1. использование onload на самом деле не является примером эффективности. Вам также следует использовать var при определении переменных (для doc , …). «но так быстрее печатать» , возможно, не самый лучший совет. Это заставляет вас попасть в не очень приятную pre цепочку, когда есть addEventListener .

2. я не понимаю, что вы назначаете pre, как и все остальное? как это работает, когда вы запускаете pre ()?

Ответ №3:

Я использовал этот ответ для другого вопроса, но поскольку в основном они одинаковы, я опубликую его и здесь.

Использование строки для установки innerHTML свойства для элемента является наиболее эффективным способом создания нескольких элементов, потому что мы будем удалять создание элементов в браузере:

 const el = document.createElement('div');

el.innerHTML = `
<h1>Page Title</h1>
<p>Lorem, ipsum dolor.</p>
<input value="Lorem ipsum dolor sit amet." >
<button id="btn">Click Me</button>
`;

const root = document.querySelector('#app');
root.appendChild(el);

Поддерживается современными браузерами. Быстрее, чем вручную перебирать элементы. Кроме того, это намного чище, чем создавать эти элементы программно.

Вы можете использовать существующий элемент the. Просто выберите элемент и вставьте содержимое:

 document.querySelector('#app').innerHTML = `
<h1>Page Title</h1>
<p>Lorem, ipsum dolor.</p>
<input value="Lorem ipsum dolor sit amet." >
<button id="btn">Click Me</button>
`;