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

Posted 2023-05-07

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

【英文标题】：Dynamic creation of list and adding HTML Tags in the each newly created element

【发布时间】：2018-08-07 03:44:35

【问题描述】：

我在我的一个项目中使用 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 的第二天 任何帮助将不胜感激

【问题讨论】：

“但这根本不起作用” - 难怪，因为这甚至不是有效/语法正确的 JavaScript。你首先需要学习一些 JavaScript 基础知识——最好是在你开始使用高级插件之前。

当你想将一个子元素添加到另一个元素时，你应该使用.append()。在这里阅读更多：developer.mozilla.org/en-US/docs/Web/API/ParentNode/append 例如：a.innerHTML =<button class="delete-button" style="float: right;">-</button> <h3>3</h3> 应该是这样的：var button = document.createElement("button");a.append(button)

【参考方案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);

这应该做你想做的:)

【讨论】：

谢谢 这对初学者很有帮助

对于 li 元素我可以像 li.data-row="1" 然后 li.data-col="1" 吗？

@Rookie_123 为此使用setAttribute，有关如何使用它的示例可以在这里找到：plainjs.com/javascript/attributes/…

这仍然会创建无效的 HTML ...您根本无法将其他交互元素（例如按钮）放入链接中。 （不知道为什么 OP 觉得必须首先在此处插入链接。）