javascript - 在 HTML 的 Javascript 函数中附加嵌套元素

Question

我正在尝试将另一个 HTML 元素附加到 Javascript 中的元素。

我在下面的功能是在单击“添加”按钮时，用户在文本框中输入的任何内容都会被放入ul我的菜单中的一个元素中，li并创建一个元素以将该文本附加到li元素内。我的函数有效，但我还想在元素内附加一个a href = #> insert text here</a>嵌套。li

所以我现在的功能是

<ul class = "dropdown-menu">
   <li> User Text </li>
</ul>

我想重现这个

<ul class = "dropdown-menu">
   <li> <a href ="#">User Text</a> </li>
</ul>

这是我到目前为止所尝试的：

 (function() {
  document.querySelector('#add').addEventListener('click', function() {
    let input = document.querySelector('#addissuetext');
    let list = document.querySelector('#menu');

    let item = document.createElement('li'); // create li node
    let hyper = document.createElement('a');
    hyper.href = "#";
    let itemText = document.createTextNode(input.value); // create text node

    item.appendChild(itemText); // append text node to li node
    hyper.appendChild(item);
    list.appendChild(item); // append li node to list

    input.value = ""; // clear input
  });
})();

我也尝试过innerHTML，但我认为这行不通。

标签： javascripthtmljquery

Answer 1

您需要先将文本附加到锚点，然后将该锚点附加到 li，然后将 li 附加到 ul。

ul > li > a > text

hyper.appendChild(itemText); // append text to anchor

item.appendChild(hyper); // append anchor node to li node

list.appendChild(item); // append li node to list

由于您没有提供片段或完整的 html，这可能会产生一些错误。

(function() {
  document.querySelector('#add').addEventListener('click', function() {
    let input = document.querySelector('#addissuetext');
    let list = document.querySelector('#menu');

    let item = document.createElement('li'); // create li node
    let hyper = document.createElement('a');
    hyper.href = "#";
    let itemText = document.createTextNode(input.value); // create text node


    hyper.appendChild(itemText); // append text to anchor

    item.appendChild(hyper); // append anchor node to li node

    list.appendChild(item); // append li node to list

    input.value = ""; // clear input
  });
})();