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

Javascript: can't add href to list item

提问by techtinkerer

I am trying to add a new item to a list item. But the below code isn't adding Hyperlink to the list item I want. Can someone please advise what's wrong?

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

HTML:

HTML：

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

JavaScript:

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

回答by xdazz

lidoesn't have the hrefattribute, you have to wrap an atag inside li.

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.

演示。

回答by duskwuff -inactive-

The hrefattribute is not meaningful on an <li>element. If you want to make an list element into a link, you will need to wrap its contents in an <a>element and apply the hrefto that.

该href属性对<li>元素没有意义。如果要将列表元素制作为链接，则需要将其内容包装在一个<a>元素中并将 应用href到该元素中。

回答by Roko C. Buljan

jsBin

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

yep so basically you missed the anchortag creation.

是的，所以基本上你错过了anchor标签创建。

回答by user13500

Though solved, I add some more information for you to read :)

虽然已解决，但我添加了更多信息供您阅读:)

Content and attributes

内容和属性

Each element has a content model:

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

``[…] a description of the element's expected contents. An HTML element must have contents that match the requirements described in the element's content model.[…]''

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

As such the <ul>element has a content model. Looking at the specswe find it to be:

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

• Zero or more liand script-supportingelements.

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

By this we can conclude that we can not have an anchor, a, inside the ulelement. But what about adding a hrefattribute to the ul?

由此我们可以得出结论，我们不能a在ul元素内部有一个锚点。但是向 中添加一个href属性ul呢？

Then we look at the Content attributes.

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

A normative list of attributes that may be specified on the element (except where otherwise disallowed), along with non-normative descriptions of those attributes. (The content to the left of the dash is normative, the content to the right of the dash is not.)

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

For ulwe find:

因为ul我们发现：

• Global attributes

• 全局属性

The Global attributes are the following:

全局属性如下：

• accesskey
• class
• contenteditable
• dir
• draggable
• dropzone
• hidden
• id
• lang
• spellcheck
• style
• tabindex
• title
• translate

• 访问键
• 班级
• 内容可编辑
• 目录
• 可拖动的
• 拖放区
• 隐
• ID
• 朗
• 拼写检查
• 风格
• 标签索引
• 标题
• 翻译

In addition it can have various event handler attributes, like onmouseover, onclick, on...and ARIA attributes. But, as we see, no hrefattribute.

此外，它可以有不同的事件处理程序的属性，如onmouseover，onclick，on...和ARIA属性。但是，正如我们所见，没有href属性。

In conclusion we now know that:

总之，我们现在知道：

1. ulcan not have an anchor as a child.
2. ulcan not have the hrefattribute.

1. ul小时候不能有主播。
2. ul不能有href属性。

---

---

But, the question was about hrefon lielement!

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

As liand ul/ olare intertwined we first had a look at ul. For liwe follow the same procedure: The content modelfor liis:

由于li和ul/ol是交织在一起的我们先来看看ul。对于li我们按照相同的过程：在内容模型的li是：

• Flow content

• 流量内容

Now, that opens up a wide range of possibilities. Here we find aat top of the list.

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

And what about the attributes? For liwe find:

那么属性呢？因为li我们发现：

• Global attributes
  If the element is a child of an ol element: value - Ordinal value of the list item

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

In other words, we now know:

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

1. ulcan nothavean anchor as a child.
2. ulcan nothavethe hrefattribute.
3. lican havean anchor as a child.
4. lican nothavethe hrefattribute.

1. ul能不能有一个锚作为一个孩子。
2. ul可以不具有的href属性。
3. li小时候可以有主播。
4. li可以不具有的href属性。

---

---

Solution

解决方案

As pointed out by others, is to add it to an anchor that we put as a child of a lielement:

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

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