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

Question

我正在尝试向列表项添加新项。但是下面的代码没有将Hyperlink添加到我想要的列表项中。有人可以告诉我哪里错了吗？

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");

Answer 1

li没有href属性，您必须在a内包含li标记。

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

<强> The DEMO.

Answer 2

href元素对<li>元素没有意义。如果要将列表元素添加到链接中，则需要将其内容包装在<a>元素中并将href应用于该元素。

Answer 3

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标签创建。

Answer 4

虽然已经解决，但我还是为您提供了更多信息：）

内容和属性

每个元素都有一个content model：

  

``[...]元素预期内容的描述。 HTML元素必须具有与元素内容模型中描述的要求相匹配的内容。[...]''

因此<ul>元素具有内容模型。看the specs我们发现它是：

• 零个或多个li和script-supporting元素。

通过这个我们可以得出结论，我们不能在a元素中有一个锚ul。但是如何为href添加ul属性呢？

然后我们看看Content attributes。

  

可以在元素上指定的标准属性列表   （除非另有规定），以及非规范性的   这些属性的描述。 （短划线左侧的内容   是规范性的，破折号右边的内容不是。）

ul我们发现：

• Global attributes

全局属性如下：

• ACCESSKEY
• 类
• CONTENTEDITABLE
• DIR
• 拖动
• 悬浮窗
• 隐藏
• ID
• 浪
• 拼写检查
• 式
• 的tabindex
• 标题
• 翻译

此外，它还可以包含各种事件处理程序属性，例如onmouseover，onclick，on...和ARIA attributes。但是，正如我们所见，没有href属性。

总之，我们现在知道：

1. ul小时候不能有锚。
2. ul不能拥有href属性。

---

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

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

• Flow content

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

那么属性呢？对于li，我们发现：

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

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

1. ul 可以 拥有作为孩子的锚。
2. ul 可以不拥有 href属性。
3. li 可以将作为孩子的锚。
4. li 可以不拥有 href属性。

---

解决方案

正如其他人所指出的那样，是将它添加到我们作为li元素的子项放置的锚点中：

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

Answer 5

另一种方法是简单地使用 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);