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?

it is best avoid using number as ID. [see here](http://stackoverflow.com/questions/5672903/can-i-have-a-div-with-id-as-number) — aahhaa, Nov 25 '16 at 14:29
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, Nov 25 '16 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, Nov 25 '16 at 14:34

Quentin · Answer 1 · 2016-11-25T14:29:07.817

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 '16 at 14:29

answered Nov 25 '16 at 14:23

Quentin

914,110
126
1,211
1,335

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 Nov 25 '16 at 14:24
Nooooooooooo. NOOOOOOOO. not again with Quentin. Why do I keep failing while supporting ><. – roberrrt-s Nov 25 '16 at 14:31

score 0 · Answer 2 · edited Nov 25 '16 at 15:42

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 '16 at 15:42

roberrrt-s

7,914
2
46
57

answered Nov 25 '16 at 14:46

prashant gedam

50
2

Append array to a class in javascript

2 Answers2