Javascript 附加子项不工作

我试图将一个div附加到一个未排序的列表中，但是附加的和先前创建的div出现问题。你知道为什么吗

非常感谢任何能帮忙的人

HTML:

JS:

---

您已经在使用jQuery-无需使用

getElementById/createElement/appendChild

。哦，只有LI元素可以是UL的直接子元素（您可能可以添加DIV，但它不是有效的HTML）。试试这个：

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

$（“#按钮无”）。单击（函数（）{
$（'#all'）。追加（$（'
'）；
});

---

演示：

在使用appendChild时，必须将脚本type=text/js放在要影响的div下面

一个简单的代码是。。。 这将创建要添加的任何元素 var varname=document.createElement（“div”）

varname.innerHTML=“你知道吗？”

---

document.getElementById（“buttonone”）.appendChild（varname）

为什么要将div元素附加到ul中？你是说李吗？旁注，打字错误<代码>$（'#buttonone'）。单击（function（）{应该是

$（'#buttonone'）。单击（function（）{

#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;
 }

$('#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);
});

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