Unordered List, List Item, JS / HTML Question

ordered and unordered list in html example
ordered list html mdn
nested list html
which attribute can be used to change its number within an ordered list?
li in html
ol type= a start= b
list-style-type
bullet list html mdn

I found a few posts referencing something similar but I could not get it working..

Simply I am trying to create a List as shown below.

<ul>
    <li><a href="https://www.google.com">foo</a> </li>
    <li><a href="https://www.google.com">bar</a></li>
</ul>

However when generating it through JS I get one of the following.

<ul>
    <li>
        <a href="https://www.google.com"></a>
        foo
    </li>
    <li>
        <a href="https://www.google.com"></a>
        bar
    </li>
</ul>

OR

    <ul>
    <li>
        foo
        <a href="https://www.google.com"></a>
    </li>
    <li>
        bar
        <a href="https://www.google.com"></a>
    </li>
</ul>

With the JS code provided.

function addListItem(id, str, url) {

var list = document.getElementById(id);

var el = document.createElement("LI");

var text = document.createTextNode(str);

if (url !== "") {

    var a = document.createElement("A");

    a.setAttribute("href", url);

    el.appendChild(text);

    el.appendChild(a);

} else {

    el.appendChild(text);

}

list.appendChild(el);

}

How would I go about doing this?

The Issue

Take a look at these two lines:

el.appendChild(text);
el.appendChild(a);

First, you append the text...

<li>
    foo
</li>

Then you append the <a>...

<li>
    foo
    <a href="https://www.google.com"></a>
</li>

The Solution

What you need to do instead, is append your text to your <a> first:

a.appendChild(text);
<a href="https://google.com">foo</a>

Then append that to your <li>:

el.appendChild(a);
<li><a href="https://google.com">foo</a></li>

Corrected version:

function addListItem(id, str, url) {
  var list = document.getElementById(id);
  var el = document.createElement("LI");
  var text = document.createTextNode(str);
  
  if (url !== "") {
    var a = document.createElement("A");
    a.setAttribute("href", url);
    a.appendChild(text);
    el.appendChild(a);
  } else {
    el.appendChild(text);
  }

  list.appendChild(el);
}

addListItem("list", "foo", "https//google.com");
<ul id="list"></ul>

<ul>: The Unordered List element, The HTML ul element represents an unordered list of items, typically rendered as a bulleted list. I'm in a project where non-HTML savvy users will be changing site content in WYSIWYG editors. One page involves an unordered list with a good amount of content. I'd like to be able to toggle the content, but I've run into an issue.

Try this:

var a = document.createElement('a');
a.setAttribute('href', 'foo.com');
a.appendChild(document.createTextNode('bar'));
console.log(a);

<ol>: The Ordered List element, An unordered list is a list in which the order of the list items does not matter. A lot more can be done with lists, CSS, and JavaScript to create  There are many ways to create an accordion list. In this article, you will see how to use a little bit of standard JavaScript to hide and display items in a list. Collapsing an Unordered List. Ordered and unordered lists are great targets for expanding and contracting items. As an example, I've created an unordered list of books using the HTML

The text is a child of the a tag, not the li tag.

a.appendChild(text);

Lists Bring Order To Web Pages: Here's The HTML Code To Create , ELEMENT UL - - (LI)+ -- unordered list --> <!ATTLIST UL  I want a list inside my paragraph, because it emphasizes greatly the structure of my sentence. E.g. „I want to buy [list]• milk, • sugar, • Apple, and • a viola[/list] today.“ This is commonly used when typesetting text with TeX. It is not semantically correct to split my sentence across two paragraphs. – Palec Nov 22 '13 at 17:37

Lists in HTML documents, HTML lists allow web authors to group a set of related items in lists. Example. An unordered HTML list: Item; Item; Item; Item. An ordered HTML  The HTML <ul> element represents an unordered list of items, typically rendered as a bulleted list. The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

HTML Lists, elements. The types of lists that can be used in HTML are : ul : An unordered list. This will list items using plain bullets. ol : An ordered list. This will use different  Unordered HTML List. An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default:

HTML, Ordered Lists#ordered-lists. The ordered list element, <ol> , works very much like the unordered list element; individual list items are  First use document.getElementsByTagName("ul") to get a list of all unordered lists. Then iterate through that list (optionally filtering per class) and use getElementsByTagName("li") per list