javascript学习笔记一：DOM基本操作

主要是为了使自己更加熟练操作DOM，记录自己的点滴，规范自己的代码！希望大家共同进步！

　　首先看完整示例：

        

　　html部分代码：当点击show按钮时，触发showValue函数，将input value的值动态添加到id="text"的元素节点中！

<p>
    <input type="text" value="" name="user_name" id="user_name" />
    <span style="padding-left:10px;"><input type="button" value="show" onclick="showValue()" /></span>
</p>
<p id="text"></p>

　　javascript部分代码：如果没有输入任何内容，给出错误提示，同时又让input获得输入焦点！

function showValue() {
    var user_name = document.getElementById("user_name");
    var text = document.getElementById("text");
    if (user_name.value == "") {
        alert("Please input some words");
        user_name.focus()
    } else {
        text.innerHTML = user_name.value;
        text.setAttribute("class", "text")
    }
}

　　HTML代码中的<div id="test"></div>完全可以不用，我们可以利用DOM动态创建，并添加到文档中！

var text = document.createElement("div");
text.appendChild(user_name.value);
document.body.appendChild(text);