基础 - 发布信息

结构

<div class="box" id="mark">    <div class="order">        <textarea name="" id="" cols="30" rows="10"></textarea><button>发布</button>    </div>    <div class="show">        <ul></ul>    </div></div>

样式

* {    margin: 0;    padding: 0;}.box {    width: 500px;    margin: 100px auto;    font-weight:bold;">#DBE1E7;}.box .order {    border: 5px solid #C81623;}.box textarea {    resize: none;    width: 400px;    margin: 20px;}.box ul {    list-style-type: none;}.box li {    width: 100%;    height: 18px;    margin: 5px 0;    font-weight:bold;">#666666;}

行为

window.onload = function () {    var oMark = document.getElementById("mark");    var oText = oMark.getElementsByTagName("textarea")[0];    var oButton = oMark.getElementsByTagName("button")[0];    var oUl = oMark.getElementsByTagName("ul")[0];    oButton.onclick = function () {        var oLi = document.createElement("li");        oLi.innerHTML = oText.value;        oText.value = "";        oUl.appendChild(oLi);    }}