動態創建列表並在每個新創建的元素中添加 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);

這應該做你想做的:)