用JS动态创建一个有序表（根据输入添加子列表项）

本文链接：https://blog.csdn.net/major_zhang/article/details/53441158

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: %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>

</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也具有类似的作用。