无序列表，列表项，JS / HTML问题

Question

我发现一些帖子引用了类似的内容，但我无法使其正常工作。

我只是想创建一个如下所示的列表。

<ul>
    <li><a href="https://www.google.com">foo</a> </li>
    <li><a href="https://www.google.com">bar</a></li>
</ul>

但是，通过JS生成它时，会出现以下情况之一。

<ul>
    <li>
        <a href="https://www.google.com"></a>
        foo
    </li>
    <li>
        <a href="https://www.google.com"></a>
        bar
    </li>
</ul>

OR

    <ul>
    <li>
        foo
        <a href="https://www.google.com"></a>
    </li>
    <li>
        bar
        <a href="https://www.google.com"></a>
    </li>
</ul>

提供了JS代码。

function addListItem(id, str, url) {

var list = document.getElementById(id);

var el = document.createElement("LI");

var text = document.createTextNode(str);

if (url !== "") {

    var a = document.createElement("A");

    a.setAttribute("href", url);

    el.appendChild(text);

    el.appendChild(a);

} else {

    el.appendChild(text);

}

list.appendChild(el);

}

我该怎么做？

Answer 1

问题

看看这两行：

el.appendChild(text);
el.appendChild(a);

首先，您添加文字...

<li>
    foo
</li>

然后您附加<a> ...

<li>
    foo
    <a href="https://www.google.com"></a>
</li>

---

解决方案

您需要做的是先将文本附加到<a>上：

a.appendChild(text);

<a href="https://google.com">foo</a>

然后将那个附加到您的<li>：

el.appendChild(a);

<li><a href="https://google.com">foo</a></li>

更正的版本：

function addListItem(id, str, url) {
  var list = document.getElementById(id);
  var el = document.createElement("LI");
  var text = document.createTextNode(str);
  
  if (url !== "") {
    var a = document.createElement("A");
    a.setAttribute("href", url);
    a.appendChild(text);
    el.appendChild(a);
  } else {
    el.appendChild(text);
  }

  list.appendChild(el);
}

addListItem("list", "foo", "https//google.com");

<ul id="list"></ul>

Answer 2

尝试一下：

var a = document.createElement('a');
a.setAttribute('href', 'foo.com');
a.appendChild(document.createTextNode('bar'));
console.log(a);

Answer 3

文本是a标记的子代，而不是li标记。

a.appendChild（text）;