Skip to content Skip to sidebar Skip to footer

Javascript: Can't Add Href To List Item

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:
<

Solution 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.


Solution 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:

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:

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:

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>

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

yep so basically you missed the anchor tag creation.


Solution 4:

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

Post a Comment for "Javascript: Can't Add Href To List Item"