我正在使用 JavaScript 和 HTML,我希望能够将用户输入添加到 HTML 中的多级列表。我已经开始用 HTML 制作一个多级列表。例如,我制作了一个包含狗信息的列表。
<div>
<h3> Dogs </h3>
<ul id="myList">
<li><b>Dog Breeds</b>
<ul>
<li class="facts"> There are a approximately 340 recognized breeds.</li>
</ul>
</li>
<li><b>Dog Fur</b>
<ul>
<li class="facts"> Depending on the dogs, there are a lot of different kinds of fur.</li>
</ul>
</li>
</ul>
</div>
在这个列表下面,我制作了 2 个可以保存用户输入的字段,旁边还有一个按钮,可以将输入的信息添加到列表中。我的按钮和类型字段代码如下:
<input type='text' id='input' placeholder="Title"/>
<button type="button" id="add">Add new dog fact</button><br>
<textarea id="input2" rows="5" cols="18" placeholder="The dog fact.."></textarea>
为了将输入添加到列表中,我写了这段代码:
“myList”是我给无序列表的id。
document.getElementById("add").onclick = function() {
var title = document.getElementById("input").value;
var description = document.getElementById("input2").value;
var li = document.createElement("li");
li.textContent = title + description;
document.getElementById("myList").appendChild(li);
document.getElementById("input2").value = ""; // clears the value
document.getElementById("input").value = ""; // clears the value
我现在的问题是,它的结构不会像我想要的那样。 通过使用上面的代码,如果我输入“Dog Size”作为标题和“Dogs can be both be large and small”,输出将如下所示。如描述:
Dog SizeDogs 可以是大的也可以是小的。
代替:
狗的尺寸
狗有大有小。
有谁知道如何更改它,以便用户输入的结构与列表其余部分的结构相同?这样描述就会嵌套在标题中?我知道这是因为我将“li.textContent”定义为“标题+描述”,我只是不知道如何添加描述数据。我试图在 javaScript 代码中创建 2 个新的列表元素,但这正如预期的那样创建了 2 个新的列表元素,然后我尝试使用“title.style.listStyleType = “none”;”来设置描述元素的样式。但是如果我把它放在函数中,那么整个函数都会停止工作。我很困惑,如果有人能帮助我,我将不胜感激!谢谢 :)
最佳答案
使用innerHTML
并添加 <br>
在 title
之间和 description
.
document.getElementById("add").onclick = function() {
var title = document.getElementById("input").value;
var description = document.getElementById("input2").value;
var li = document.createElement("li");
li.innerHTML = title + "<br>" + description;
document.getElementById("myList").appendChild(li);
document.getElementById("input2").value = "";
document.getElementById("input").value = "";
}
<div>
<h3> Dogs </h3>
<ul id="myList">
<li><b>Dog Breeds</b>
<ul>
<li class="facts"> There are a approximately 340 recognized breeds.</li>
</ul>
</li>
<li><b>Dog Fur</b>
<ul>
<li class="facts"> Depending on the dogs, there are a lot of different kinds of fur.</li>
</ul>
</li>
</ul>
</div>
<input type='text' id='input' placeholder="Title" />
<button type="button" id="add">Add new dog fact</button><br>
<textarea id="input2" rows="5" cols="18" placeholder="The dog fact.."></textarea>
</div>
而不是使用 onclick
, 使用 addEventListener
如果你想添加 description
(如 ul
)在 title
下,下面是代码。
const list = document.querySelector('#myList');
document.querySelector('button#add')
.addEventListener('click', function() {
const title = document.querySelector('#input').value;
const description = document.querySelector('#input2').value;
const li = document.createElement('li');
li.innerHTML = `<b>${title}</b>`;
const ul = document.createElement('ul');
const childli = document.createElement('li');
childli.textContent = description;
ul.appendChild(childli);
li.appendChild(ul);
list.appendChild(li);
});
<div>
<h3> Dogs </h3>
<ul id="myList">
<li><b>Dog Breeds</b>
<ul>
<li class="facts"> There are a approximately 340 recognized breeds.</li>
</ul>
</li>
<li><b>Dog Fur</b>
<ul>
<li class="facts"> Depending on the dogs, there are a lot of different kinds of fur.</li>
</ul>
</li>
</ul>
</div>
<input type='text' id='input' placeholder="Title" />
<button type="button" id="add">Add new dog fact</button><br>
<textarea id="input2" rows="5" cols="18" placeholder="The dog fact.."></textarea>
关于javascript - 使用 JavaScript 将元素添加到 html 多级列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59581151/