Append child not working in JavaScript [closed]

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

---

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed 8 years ago.

Improve this question

CSS:

ul #allposts li{
    height: 50px;
    width: 50px;
    background-color: yellow;
    border: 1px solid yellow;
}

HTML:

<ul id = "allposts"></ul>

JS:

var woow2 = document.getElementById('allposts');
var oneofpost = document.createElement('li');
woow2.appendChild(oneofpost);

When I run the code, the oneofpost does not appear. It should appear as a little yellow brick right?

Any ideas why?

Answer 1

The problem is in your CSS. Your selector should be:

ul#allposts li

But IDs should be unique, so you shouldn't need to qualify it with a tag name:

#allposts li

Your selector as it currently stands reads:

All li elements that are descendants of elements with the ID of allposts that are descendants of all ul elements, which probably isn't what you want.

Answer 2

http://jsfiddle.net/dFD7p/

#allposts li{  //just removed the ul(space) and works
    height: 50px;
    width: 50px;
    background-color: yellow;
    border: 1px solid yellow;
}

Answer 3

Take out the space between ul and #allposts. That should do it.

(Note: you actually don't need ul#allposts because IDs are unique as other answers have reminded me.)