动态创建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。