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

我现在的问题是，它不会按照我的意愿进行结构化。 通过使用上面的代码，如果我输入“Dog Size”作为标题和“Dogs can be large and small”，输出将如下所示。如描述：

Dog SizeDog 可以是大的也可以是小的。

代替：

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

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

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>