gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 20:43:20 24 4
gpt4 key购买 nike

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

最佳答案

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

您正在尝试将元素附加到另一个元素。这意味着 a 将成为父元素,而 buttonh3 将成为子元素。

为此,我们首先必须像这样创建按钮:

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);

这应该做你想做的:)

关于javascript - 动态创建列表并在每个新创建的元素中添加 HTML 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49009621/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com