您的位置:首页 > Web前端 > JavaScript

[学习笔记]JavaScript基础--DOM创建元素

2015-08-07 01:14 786 查看
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script>
window.onload = function ()
{
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('ull');
var oTxt = document.getElementById('txt1');

oBtn.onclick = function ()
{
var oLi = document.createElement('li');
var aLi = oUl.getElementsByTagName('li');

oLi.innerHTML = oTxt.value;

//父级.appendChild(子节点);
//oUl.appendChild(oLi);

//往最前面插入元素
//oUl.insertBefore(oLi,aLi[0]);

if (aLi.length > 0)
{
oUl.insertBefore(oLi, aLi[0]);
}
else
{
oUl.appendChild(oLi);
}
};
};
</script>
</head>
<body>
<input id="txt1" type="text"/>
<input id="btn1" type="button" value="创建li"/>
<ul id="ull">

</ul>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: