web.js.创建元素

春花秋月灬相伴

于 2017-05-04 18:25:44 发布

阅读量217

点赞数

本文链接：https://blog.youkuaiyun.com/qq_38300174/article/details/71173309

版权

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oUl=document.getElementById('ul1');
    var oTxt=document.getElementById('txt1');

    oBtn.onclick=function ()
    {
        var oLi=document.createElement('li');//创建li节点
        var aLi=oUl.getElementsByTagName('li'); //  
        oLi.innerHTML=oTxt.value;
        oUl.appendChild(oLi);   //将创建的节点添加到ul中  
        oUl.insertBefore(oLi, aLi[0]);//实现每次添加的元素出现在最上面这一效果。若添加注释li为顺序添加
    };
};
</script>
</head>

<body>
<input id="txt1" type="text"/>
<input id="btn1" type="button" value="创建li"/>
<ul id="ul1">
</ul>
</body>
</html>