Javascript: can't add href to list item

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

Cockloft

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.

Zosema

Answer 2

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 at the specs we find it to be:

• Zero or more li 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... and ARIA 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: The content 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>

Murderous

Answer 3

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.

Hertz

One should not wrap the li inside an anchor but the other way around. – Murderous

Right! I meant wrapping the contents of the list element, not the whole thing. – Hertz

Thought as much, but it was not clear to that point. Good fix ;) – Murderous

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.

Muck

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

Brunk