搜索

创建元素实战

原创 2019-03-09 16:37:40 303
摘要:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>*{margin:0;padding: 0;}ul li{list-style: none;}</style></hea

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

*{margin:0;padding: 0;}

ul li{list-style: none;}

</style>

</head>

<body>

<ul>


</ul>

<input type="text" name="info">

<button>提交</button>


</body>

<script type="text/javascript">

//获取元素

var input = document.getElementsByName('info')[0];

var button = document.getElementsByTagName('button')[0];

var ul = document.getElementsByTagName('ul')[0];


button.onclick = function() {

var li = document.createElement('li'); // 创建列表项li

li.innerHTML = input.value; // 填充内容

ul.appendChild(li,input); //将内容添加到列表中

         input.value = ''; //清空文本框

};

</script>

</html>


批改老师:韦小宝批改时间:2019-03-09 16:39:08
老师总结:写的还是很不错的 实际上只需要弄懂了这些原理 实现起来都并不是很难

发布手记

热门词条