index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>页面</title>
<!--通过链接的方式使用CSS-->
<link rel="stylesheet" href="css/master.css">
<script src = "js/main.js" charset = "utf-8"></script>
<!--把JS放进main.js后下面可以省略，同style放进css里面-->
<script>
//定义函数
</script>
<style media="screen">
/*必须闭合*/
</style>
</head>
<body>
<header>
time is long,life is short
</header>
<main>
<aside class= "">
aside
</aside>
<article class="">
<input id="info" placeholder = "输入内容">
<!-- <input type="button" value="添加"> -->
<!-- <button type="button" name = "button">添加</button> -->
<!--调用上面的show()的函数-->
<button onclick = "show()" type="button" name="button">添加</button>
<!-- <h1 id = "a">a</h1> -->
<ol id = "list">
</ol>
</article>
</main>
<footer>
版权声明
</footer>
</body>
</html>
css/master.css:
/*tag 名，元素选择器*/
* {
margin:0;
}
header,footer{
background-color: #4a4;
color: #fff;
font-size:2em;
padding:1em;
text-align:center;
}
footer {
font-size: 2em;
/*定义绝对位置才能用bottom，left，right，top，和下一句是一起用的*/
position: fixed;
/*离底部多少像素*/
bottom: 20px;
text-align: left;
100%;
}
main {
80%;
background-color: #eee;
/*外边距距离，加上auto就是左右自动相等*/
margin:2em auto;
/*没有这个发现剩余的没显示*/
overflow: auto;
}
aside {
40%;
background-color: #f00;
float: left;
}
article {
%60;
background-color: #00f;
float:right;
min-height:300px;
}
button,input {
font-size:1.5em;
}
input {
/*上下边距*/
margin: 0 2em;
}
js/main.js:
// 定义函数
function show() {
// 获得输入
var a = document.getElementById('info').value;
// 显示
// document.getElementById('result').innerText = a;
var li = document.createElement('li');
li.innerText = a;
document.getElementById('list').appendChild(li);
// alert('hello');
}
在这个js文件夹中实现了动态脚本行为的功能，先用a存取id为info的value值，再用createElement动态创建一个表的子节点，再动态把a赋给innerText，innerText专门用来动态输出文本，然后在id为list的子列表中动态生成输入的文本。具体作用可见下面的解释
demo:
document.getElementById()是JavaScript中的语法
通过元素的ID特性来获取元素
例如有入下元素：
<input type="text" id="button1" value="Click Me"/>
那么当调用document.getElementById("button1").Value的时候，返回的就是"Click Me"了
document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。详细可见：http://www.jb51.net/article/34740.htm
javascript innertext用法：
例1：动态改变文本和Html
<html>
<head>
<title>DHtml举例1</title>
<style>
<!--
body{ font-family:"宋体";color="blue";font-size=9pt}
-->
</style>
<script language=javascript>
function changeText()
{
DT.innerText="我很好！";
}//function
function changeHtml()
{
DH.innerHTML="<i><U>我姓肖！</U></i>";
}//function
function back()
{
DT.innerText="您好吗？";
DH.innerHTML="您姓什么？";
}
</script>
</head>
<body>
<p><font color=gray>请点击下边的文字……</font></p>
<ul>
<li id=DT onclick="changeText()">您好吗？</li>
<li id=DH onclick="changeHtml()">您姓什么？</li>
<li onclick="back()">恢复原样！</li>
</ul>
</body>
</html>
innerText属性用来定义对象所要输出的文本，在本例中中innerText把对象DT中的文本“您好吗？”变成了“我很好！”（语句 DT.innerText="我很好！"）。而对对象DH的改变用了innerHTML属性，它除了有innerText的作用外，还可改变对象DH内部的HTML语句，于是它把文本变成了“我姓肖！”，而且文本输出改成了斜体（<i></i>）并下加一条直线（<u></u>），即语句 DH.innerHTML="<i><u>我姓肖</u></i>"。outerText和outHTML也具有类似的作用。