How to add class to element created using document.createElement?

Question

I have managed to add a class to the ul element but I can't get the syntax right to add classes to the li and a elements. Can anyone help please?

<script>
    anchors.options.placement = 'left';
    anchors.add('.entry-content h2');
    generateTableOfContents(anchors.elements);

    // External code for generating a simple dynamic Table of Contents
    function generateTableOfContents(els) {
      var anchoredElText,
          anchoredElHref,
          ul = document.createElement('UL');
          ul.className = "uk-nav uk-nav-default";

      document.getElementById('table-of-contents').appendChild(ul);

      for (var i = 0; i < els.length; i++) {
        anchoredElText = els[i].textContent;
        anchoredElHref = els[i].querySelector('.anchorjs-link').getAttribute('href');
        addNavItem(ul, anchoredElHref, anchoredElText);
      }
    }

    function addNavItem(ul, href, text) {
      var listItem = document.createElement('LI'),
          anchorItem = document.createElement('A'),
          textNode = document.createTextNode(text);

      anchorItem.href = href;
      ul.appendChild(listItem);
      listItem.appendChild(anchorItem);
      anchorItem.appendChild(textNode);
    }
</script>

Possible duplicate of How to add a class to DOM element in JavaScript? — Johan Willfred
– Johan Willfred, Commented Mar 16, 2017 at 10:15
??? listItem.className = '...'. If you can't see the correct rendering, please clarify your question. — Teemu
– Teemu, Commented Mar 16, 2017 at 10:15
What happens if the className property is set on listItem and anchorItem? Do they simply disappear? — Adrian Wragg
– Adrian Wragg, Commented Mar 16, 2017 at 10:15

Hamik Hambardzumyan · Accepted Answer · 2017-03-16 10:18:07Z

10

before append li tag in the ul you need add your class then append li tag to ul tag like this

 var listItem = document.createElement('LI'); 
 listItem.className = 'someClassName';
 ul.appendChild(listItem);

answered Mar 16, 2017 at 10:18

Hamik Hambardzumyan

1872 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Fabian Klötzl Over a year ago

@sabithpocker No it doesn't, but it triggers one less reflow.

Anthony Over a year ago

Thanks, this was helpful

Collectives™ on Stack Overflow

How to add class to element created using document.createElement?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related