Append child not working

Question

Я пытаюсь добавить div в неуказанный список, но добавленный и ранее созданный div имеет проблемы с появлением. Любые идеи почему?

Большое спасибо всем, кто может помочь!

HTML:

<button type="button" id="buttonone" class="add"><b><span>Add</span></b> 
</button> 
<ul id = "all"></ul> 

CSS:

#woow{ 
    height: 50px; 
    width: 50px; 
    background-color: red; 
} 
#buttonone { 
    opacity: 0; 
    position: relative; 
    left: 78%; 
    top: 23px; 
    font-family:"Roboto"; 
    height: 38px; 
    width: 100px; 
    background-color: #5dade2; 
    color: white; 
    border-radius: 2px; 
    font-size: 22px; 
    outline: 0px solid transparent; 
    border: 0px solid transparent; 
    -webkit-transition: all 0.15s linear; 
    -moz-transition: all 0.15s linear; 
    transition: all 0.15s linear; 
} 

JS:

$('#text').fadeTo(0, 1); 
$('#text').addClass('box animated bounceInDown'); 
setTimeout(function() 
{ 
    $('#buttonone').fadeTo(0, 1); 
    $('#buttonone').addClass('box animated bounceInDown'); 
}, 100); 
$('#buttoneone').click(function(){ 
    var list = document.getElementById('all'); 
    var div = document.createElement('div'); 
    div.id = "woow"; 
    list.appendChild(div); 
}); 

Answer 1

Вы используете JQuery уже - нет необходимости использовать getElementById/createElement/appendChild. О, и только элемент LI может быть прямым дочерним элементом UL (возможно, вы сможете добавить DIV, но он не будет действительным HTML). Попробуйте это:

$('#buttonone').click(function(){ 
    $('#all').append($('<li><div id="woow"/></li>')); 
}); 

Demo: http://jsfiddle.net/WN649/1/

Answer 2

в использовании AppendChild вы должны поместить ваш тип сценария = текст/JS ниже DIV вы пытаетесь повлиять.

простой код, чтобы попробовать это с ... это создает любой элемент, который вы хотите добавить var varname = document.createElement ("div");

varname.innerHTML = "Знаете ли вы?";

document.getElementById ("buttonone"). AppendChild (varname);