动态创建列表并在每个新创建的元素中添加 HTML 标签

Question

我在我的一个项目中使用 gridster，我的主要目标是动态创建小部件。我需要创建的小部件数量将来自后端（Django）。但现在我想编写一个简单的 javascript 代码动态创建小部件，我正在硬编码动态小部件数量的值 读了一点后，我发现了以下代码

<ul>
<script type="text/javascript">
var ul = document.createElement("ul");
document.body.appendChild(ul);

for (var i = 1; i <= 3; i++)
{
   var li = document.createElement("li");  
   li.className = "file";

   var a = document.createElement("a");
   a.innerHTML = 1;

  li.appendChild(a);
  ul.appendChild(li);
}

</script>

但我的一个 li 元素就像下面

 <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button><h3>1</h3></li>

所以在上面的代码中我要替换

a.innerHTML = 1; 

与

a.innerHTML =<button class="delete-button" style="float: right;">-</button>
<h3>3</h3>

但这根本不起作用。我什至知道这不是我想要的但这只是实际所需输出之前的一步

这只是我开始使用 jquery/javascript 和 gridster 的第二天 任何帮助将不胜感激

Answer 1

a.innerHTML =<button class="delete-button" style="float: right;">-</button>
<h3>3</h3>

您正在尝试将元素附加到另一个元素。这意味着a 将成为父元素，button 和h3 将成为子元素。

为此，我们首先必须像这样创建button：

var button = document.createElement('button');
button.classList.add('delete-button');
button.style.cssFloat = 'right';

然后我们创建h3:

var h3 = document.createElement('h3');
h3.innerHTML = '3';

然后我们将元素追加到a:

a.append(button);
a.append(h3);

这应该做你想做的:)