Создать HTML-элемент динамически?

Question

Я новичок в javascript, поэтому, возможно, мой вопрос будет казаться гвоздем для некоторых из вас. я эту строку, это создать Div элемент:

<div id = "popUpWin" style = "width:' + width + 'px; height:' + height + 'px;"></div>; 

Мой вопрос заключается в том, чтобы создать эту строку динамически с помощью JavaScript?

Answer 1

Существует по крайней мере несколько способов сделать это.

1. Использование document.createElement, который является одним из DOM API функций.

   // Create the element 
   var d = document.createElement('div'); 
   
   // Set its ID 
   d.id = "popUpWin"; 
   
   // Set the style properties on the element's `style` object 
   d.style.width = width + "px"; 
   

   d.style.height = height + "px";

   ... а затем предположительно помещаем его в документ с использованием appendChild или insertBefore или аналогичным другим элементом, находящимся в документе.

2. Использование insertAdjacentHTML на существующем элементе:

   theOtherElement.insertAdjacentHTML(
       'beforeend', 
       '<div id = "popUpWin" style = "width:' + width + 'px; height:' + height + 'px;"></div>' 
   ); 
   

   Этот пример будет добавить div как ребенок прямо в конце существующего элемента (не нарушая другие элементы, которые уже в нем).

3. Используйте innerHTML на существующий элемент, если вы хотите заменить его содержание:

   theOtherElement.innerHTML = 
       '<div id = "popUpWin" style = "width:' + width + 'px; height:' + height + 'px;"></div>'; 
   

   Обратите внимание, что это будет удалить любые другие элементы внутри theOtherElement и заменить их с только что div.