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; width:100%; } main { width:80%; background-color: #eee; /*外边距距离，加上auto就是左右自动相等*/ margin:2em auto; /*没有这个发现剩余的没显示*/ overflow: auto; } aside { width: 40%; background-color: #f00; float: left; } article { width: `; 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 οnclick="changeText()">您好吗？</li> <li id=DH οnclick="changeHtml()">您姓什么？</li> <li οnclick="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也具有类似的作用。
