获取元素用的是document.getElementById(“”);

新建元素是createElement(“”);

 

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function ()
{
oBtn=document.getElementById('btn1');
oUl=document.getElementById('ul1');

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

}
}
</script>
</head>
<body>
<input type="button" id="btn1" value="创建Li"/>
<ul id="ul1">

</ul>
</body>
</html>

创建的思路先用createElement来创建一个元素,然后再加在某一个父节点下;用

父节点.appendChild(子节点)

这种格式来做;

继续加深写:新建li的同时,我们LI有txt的属性文字

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function ()
{
oBtn=document.getElementById('btn1');
oUl=document.getElementById('ul1');
oTxt=document.getElementById("txt1");

oBtn.onclick=function()
{
var aLi=document.createElement('li');
oUl.appendChild(aLi);
//格式是:父级appendChild(子节点)
aLi.innerHTML=oTxt.value;
}
}
</script>
</head>
<body>
<input id="txt1" type="text"/>;
<input type="button" id="btn1" value="创建Li"/>;
<ul id="ul1">

</ul>
</body>
</html>

用appendChild新建的元素是在原来的元素后面新建的;微博和论坛之类的新建帖子都是在最前面新建一个元素的;也写一个类似的:用insertBefore它的语法是:insertBefore(新建类型的变量,新建类型的位置)

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function ()
{
oBtn=document.getElementById('btn1');
oUl=document.getElementById('ul1');
oTxt=document.getElementById("txt1");

oBtn.onclick=function()
{
var oLi=document.createElement('li');
var aLi=document.getElementsByTagName('li')
//oUl.appendChild(aLi);
//格式是:父级appendChild(子节点)
oLi.innerHTML=oTxt.value;
oUl.insertBefore(oLi,aLi[0]);
}
}
</script>
</head>
<body>
<input id="txt1" type="text"/>;
<input type="button" id="btn1" value="创建Li"/>;
<ul id="ul1">

</ul>
</body>
</html>

但是这个函数在IE是有错误的,因为第一次插入的时候,aLi[0]是没有的,所以还需要用if来写一个兼容性的问题;

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function ()
{
oBtn=document.getElementById('btn1');
oUl=document.getElementById('ul1');
oTxt=document.getElementById("txt1");

oBtn.onclick=function()
{
var oLi=document.createElement('li');
var aLi=document.getElementsByTagName('li')
//oUl.appendChild(aLi);
//格式是:父级appendChild(子节点)
oLi.innerHTML=oTxt.value;
if(aLi.length>0)
{
oUl.insertBefore(oLi,aLi[0]);
}
else
{
oUl.appendChild(oLi)
}
}
}
</script>
</head>
<body>
<input id="txt1" type="text"/>;
<input type="button" id="btn1" value="创建Li"/>;
<ul id="ul1">

</ul>
</body>
</html>

这样就OK了;

““