JavaScript：无法将href添加到列表项

Question

我可以帮助您翻译，以下是需要翻译的内容：

我正在尝试向列表项添加新项目。但是下面的代码没有将超链接添加到我想要的列表项中。请问有什么问题吗？

HTML：

<div>
    <ul id="list1">
      <li>Ut enim ad minim veniam.</li>
      <li>Excepteur sint occaecat cupidatat non proident.</li>
    </ul>
</div>

JavaScript:

//create new li element
var newListItem = document.createElement("li");
newListItem.textContent = "...ooo";
var ulist = document.getElementById("list1");
console.log("adding link..");
newListItem.setAttribute('href', "http://www.msn.com");
ulist.appendChild(newListItem);
console.log("added item");

- techtinkerer

Answer 1

li标签没有href属性，您需要在li内部包裹一个a标签。

var a = document.createElement("a");
var ulist = document.getElementById("list1");
var newItem = document.createElement("li");

a.textContent = "...ooo";
a.setAttribute('href', "http://www.msn.com");
newItem.appendChild(a);
ulist.appendChild(newItem);

演示。

- xdazz

Answer 2

尽管问题已解决，我添加了一些更多的信息供您阅读 :)

内容和属性

每个元素都有一个内容模型：

引用： “[...]元素预期内容的描述。 HTML元素必须具有与元素内容模型中描述的要求相匹配的内容。 [...]”

因此，<ul>元素具有内容模型。查看规范，我们发现它是：

- 零个或多个li和支持脚本元素。

通过这个我们可以得出结论，我们不能在 ul 元素内部添加锚点 a。但是如果给 ul 添加一个 href 属性呢？

然后我们看一下 内容属性。

列出了可以在该元素上指定的属性列表（除非另有说明），以及这些属性的非规范化描述。（短横线左侧的内容是规范性的，短横线右侧的内容则不是。）

对于 ul，我们找到：

• 全局属性

全局属性如下：

• accesskey（访问键）
• class（类）
• contenteditable（可编辑内容）
• dir（文本方向）
• draggable（是否可拖动）
• dropzone（指定放置拖拽数据的区域）
• hidden（是否隐藏元素）
• id（元素ID）
• lang（语言）
• spellcheck（是否启用拼写检查）
• style（样式）
• tabindex（tab键顺序）
• title（标题）
• translate（是否翻译元素内容）

此外，它可以有各种事件处理程序属性，比如onmouseover、onclick、on...以及ARIA attributes。但是，正如我们所看到的，没有href属性。

总之，我们现在知道：

1. ul不能有锚点作为子元素。
2. ul不能有href属性。

---

但是，问题是关于 li 元素上的 href！

由于 li 和 ul / ol 是交织在一起的，我们首先看了 ul。对于 li，我们遵循相同的程序：content model for li 是：

• 流内容

现在，这打开了广泛的可能性。在此处，我们在列表顶部找到了 a。

那么关于 attributes 呢？对于 li，我们发现：

• 全局属性
  如果元素是 ol 元素的子元素：value - 列表项的序数值

换句话说，我们现在知道：

• ul不能将锚点作为子元素。
• ul不能使用href属性。
• li可以将锚点作为子元素。
• li不能使用href属性。

---

解决方案

正如其他人指出的那样，解决方法是将其添加到锚点中，然后将锚点作为li元素的子元素：

<ul>
    <li><a href="myurl">Hello</a></li>
</ul>

- user13500

Answer 3

href属性在<li>元素上没有意义。如果您想将列表元素变成链接，您需要用<a>元素包装其内容，并将href应用到它。

- user149341

---

应该将li放在锚点内而不是相反。 - user13500

没错！我是指将列表元素的内容换行，而不是整个元素。 - user149341

想到了，但之前没有清晰到那个程度。好修复 ;) - user13500

Answer 4

另一种方法是直接使用link()方法。例如：

//create new li element
let newListItem = document.createElement("li");
let ulist = document.getElementById("list1");
newListItem.innerHTML = "...ooo".link("http://www.msn.com");
ulist.appendChild(newListItem);

- Félix C.T.

Answer 5

jsBin

（注：该段代码为程序相关内容）

var ulist = document.getElementById("list1");
var newListItem = document.createElement("li");
var newAnchor = document.createElement("a");
newAnchor.textContent = "...ooo";
newAnchor.setAttribute('href', "http://www.msn.com");
newListItem.appendChild(newAnchor);
ulist.appendChild(newListItem);

没错，基本上你错过了创建 anchor 标签的步骤。

- Roko C. Buljan