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

在表单输入并利用js创建列表

2013-04-13 21:49 218 查看

学习自Head First HTML5

// JavaScript Document
window.onload = init;
function init(){
var button = document.getElementById("addButton");
button.onclick = handleButtonClick;
}
function handleButtonClick(){
var textInput = document.getElementById("songTextInput");
var songName = textInput.value;

var li = document.createElement("li");
li.innerHTML = songName;
var ul = document.getElementById("playlist");
ul.appendChild(li);
}

<!doctype html>
<html lang="en">
<head>
<title>Webville Tunes</title>
<meta chaset="utf-8">
<script src="playlist.js">
</script>
<link rel="stylesheet" href="playlist.css">
</head>

<body>
<form>
<input type="text" id="songTextInput" size="40" placeholder="song name">
<input type="button" id="addButton" value="Add Song">
</form>
<ul id="playlist">

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航