1.首先创建html结构，如下图所示，一个input元素，一个按钮，一个空的ul列表。
2.然后添加按钮点击事件，如下图所示，在按钮点击事件中获得input元素。
3.通过value属性我们可以获得用户在input中输入的内容，如下图所示。
4.下面我们来动态创建一个li元素，如下图所示，运用document中的createElement方法即可。
5.创建好li元素以后，下面要做的就是给其设置innerHTML内容，如下图所示。
6.接下来就是获取ul元素了，如下图所示，仍然用getElementById方法。
7.最后通过调用appendChild方法将创建的li元素添加到ul列表中，如下图所示。
利用来JS控制页面控件显示和隐藏有两种方法，两种方法分别利用HTML的style中的两个属性，两种方法的不同之处在于控件隐藏后是否还在页面上占空位。 方法一： document.getElementById("EleId").style.visibility="hidden" document.getElementById("EleId").style.visibility="visible" 利用上述方法实现隐藏后，页面的位置还被控件占用，显示空白。 方法二： document.getElementById("EleId").style.display="none" document.getElementById("EleId").style.display="inline" 利用上述方法实现隐藏后，页面的位置不被占用。<script type="text/javascript">window.onload=function(){
document.getElementById("box").style.border = "10px solid red"
}
</script>
你执行代码的时候box还没生成，浏览器找不到这个元素。
