使用JavaScript向html多级列表添加元素

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

我现在的问题是，它的结构不会像我所希望的那样。 通过使用上述代码，如果我键入“Dog Size”作为标题和“Dog可以是大的也可以是小的”，则输出如下所示：

狗的大小可以是大的也可以是小的

而不是：

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

---

是否有人知道如何改变这一点，以便用户输入的结构与列表的其他部分相同？这样说明就会嵌套在标题中？我知道这是因为我将“li.textContent”定义为“title+description”，我不知道如何添加描述数据。我曾尝试在javaScript代码中创建两个新的列表元素，但正如预期的那样，这会创建两个新的列表元素，然后我尝试使用“title.style.listStyleType=“none”；”设置描述元素的样式，但如果我将其放在函数中，则整个函数都会停止工作。我很困惑，如果有人能帮助我，我将非常感激！谢谢：）

使用

innerHTML

并在

标题

和

说明

之间添加

document.getElementById（“add”）.onclick=function（）{
var title=document.getElementById（“输入”）.value；
var description=document.getElementById（“input2”）.value；
var li=document.createElement（“li”）；
li.innerHTML=标题+“
”+说明；
document.getElementById（“myList”）.appendChild（li）；
document.getElementById（“input2”）.value=“”；
document.getElementById（“输入”）.value=“”；
}

狗

狗的品种

大约有340个公认的品种


狗毛

根据狗的不同，有很多不同种类的毛皮



添加新的狗的事实

想想您在HTML中创建的结构：

Title
Dog Fact

。在JavaScript函数中构建元素时，您将如何复制它？更直接地说，您只有一个列表项元素。如果希望以相同的方式构造它，则需要另外创建

b

元素、

ul

元素和

li

元素，并以相同的方式将它们放在一起。尽管您可以使用

document.createElement（）

来处理其中的每一项，但是使用第一个列表项的

innerHTML

属性可能会更容易，正如前面提到的。我知道您的新特性，但是在您了解了这一点之后，您可能会想看看jquery和knockout。Jquery是一个库，它可以让这些东西变得更简单，而knockout在这种html列表操作中非常好。

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

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