需求分析:点击“创建li”按钮,就会在下面创建一个li标签,如果同时在文本框中添加相应的文字信息将作为新添加li节点中的内容。
<!DOCTYPE HTML>
<!--
DOM创建元素,①创建li,②再插入相应的父级中去
-->
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
var oU1=document.getElementById('ul1');
var oTxt=document.getElementById('txt1');
oBtn.onclick=function ()
{
var oLi=document.createElement('li');//创建了li子节点,但是并没有添加进去
oLi.innerHTML=oTxt.value;
oU1.appendChild(oLi);//父级.appendChild(子节点);添加子节点的方法
};
};
</script>
</head>
<body>
<input id="txt1" type="text"/>
<input id="btn1" type="button" value="创建li"/>
<ul id="ul1">
</ul>
</b