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

Question

我正在为我的一个项目使用 gridster，我的主要目标是创建小部件 dynamically.The 我需要创建的小部件数量将来自后端（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 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>

但这在 all.I 上不起作用，甚至知道这不是我想要的但这只是实际所需输出之前的一步

这只是我开始使用 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);

这应该可以满足您的需求:)

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

Dynamic creation of list and adding HTML Tags in the each newly created element

javascript

jquery

gridster