使用 JavaScript 将元素添加到 html 多级列表中

Question

我正在使用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

我现在的问题是，它的结构不会像我想要的那样。 通过使用上面的代码，如果我输入"狗的大小"作为标题，"狗可以大也可以小"作为描述，输出将如下所示：

狗的大小狗可以大也可以小。

而不是：

狗的大小
狗可以大也可以小。

有谁知道如何更改这一点，因此用户输入的结构将与列表其余部分相同？以便描述将嵌套在标题中？我知道这是因为我将"li.textContent"定义为"标题+描述"，我只是不知道如何添加描述数据。我尝试在javaScript代码中创建2个新的列表元素，但是正如预期的那样，这只是创建了2个新的列表元素，然后我尝试使用"title.style.listStyleType = "none";"来设置description元素的样式，但是如果我将其放在函数中，那么整个函数将停止工作。我很困惑，如果有人能够帮助我，我将不胜感激！谢谢:)

Answer 1

使用innerHTML并在title和description之间添加<br>。

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如果要在title下添加description(如ul(，下面是代码。

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>