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

Question

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:

<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 doesn't have the href attribute, you have to wrap an a tag inside 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

The href attribute 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 href to that.

Answer 3

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.[…]''

As such the <ul> element has a content model. Looking atthe specs we find it to be:

• Zero or moreli and script-supporting elements.

By this we can conclude that we can not have an anchor, a , inside the ul element. But what about adding a href attribute to the 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 ul we find:

• Global attributes

The Global attributes are the following:

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

In addition it can have various event handler attributes , like onmouseover , onclick , on... andARIA attributes . But, as we see, no href attribute.

In conclusion we now know that:

1. ul can not have an anchor as a child.
2. ul can not have the href attribute.

---

But, the question was about href on li element!

As li and ul / ol are intertwined we first had a look at ul . For li we follow the same procedure: Thecontent model for li is:

• Flow content

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

And what about the attributes ? For li we find:

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

In other words, we now know:

1. ul can not have an anchor as a child.
2. ul can not have the href attribute.
3. li can have an anchor as a child.
4. li can not have the href attribute.

---

Solution

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

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

Answer 4

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 anchor tag creation.

Answer 5

Another way would be to simply use the link() method. For example:

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