Append array to a class in javascript

Question

I have an array in javascript called menuElm that has <ul> elements in it:

<ul id="1"></ul>
<ul id="2"></ul>
<ul id="3"></ul>

I have a page in HTML that has the following:

<ul id="menu">
    <li class="menu-item"></li>
    <li class="menu-item"></li>
    <li class="menu-item"></li>
</ul>

I want to add the elements of menuElm to the HTML page so it would look like this:

<ul id="menu">
    <li class="menu-item">
         <ul id="1"></ul>
    </li>
    <li class="menu-item">
         <ul id="2"></ul>
    </li>
    <li class="menu-item">
         <ul id="3"></ul>
    </li>
</ul>

I have tried the following, but the <ul> elements just wont show up in the page nor in the code:

function CreateMenu() {
    var menuElm;
    var k = 0;

    menuElm = createElm("ul");
    menuElm.id = ++k;

    for (var i = 0; i < menuElm.length; ++i) {
        document.getElementsByClassName("menu-item")[i].appendChild(menuElm[i]);
    }
}

I am new with JavaScript, what am I doing wrong?

You're declaring var k = 0 in the function so menuEl.id will always be 1. Also it's unclear what createElm("ul") is returning, assuming it's a shortcut for document.createElement(). But either way when CreateMenu run the loop is pretty useless as menuElm will always be a single element so not right to use menuElm.length in that case. You're better off saving the result of document.getElementsByClassName("menu-item") and loop over the length of that. — GillesC
– GillesC, Commented Nov 25, 2016 at 14:30
I changed menuElm.length to 3, and added the createElm("ul") into the loop, which is doing the same as document.creatElement("ul") Now it is creating the 3 ul-s with different id-s as it should be, although it doesnt add it into the classes — balintpekker
– balintpekker, Commented Nov 25, 2016 at 14:34

Quentin · Accepted Answer · 2016-11-25 14:29:07Z

4

menuElm.length

The ul element doesn't have a length, so you are looping from 0 to 0, which is 0 iterations.

menuElm = createElm("ul");

This function isn't defined. You need document.createElement('ul');

menuElm = createElm("ul");
menuElm.id = ++k;

You appear to be creating one list item, and then changing its ID and appending it multiple times.

You need a new list item each time you go around the loop.

appendChild(menuElm[i]);

You've been treating menuElm as an element previously. It isn't an array, [i] makes no sense here.

edited Nov 25, 2016 at 14:29

answered Nov 25, 2016 at 14:23

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

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

2 Comments

roberrrt-s Over a year ago

Also, ++k is returning the value before incrementing, so you'd end up with 0 1 2 instead of 1 2 3 if this would have worked.

roberrrt-s Over a year ago

Nooooooooooo. NOOOOOOOO. not again with Quentin. Why do I keep failing while supporting ><.

roberrrt-s · Accepted Answer · 2016-11-25 15:42:21Z

0

$("#menu").find('li').each(function(i){
    $(this).append(menuElm[i]);
});

/* if you want to use jquery here is the code to append */

edited Nov 25, 2016 at 15:42

roberrrt-s

8,2502 gold badges49 silver badges61 bronze badges

answered Nov 25, 2016 at 14:46

prashant gedam

402 bronze badges

Collectives™ on Stack Overflow

Append array to a class in javascript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related