JavaScript DOM 基本操作：获取元素、动态添加内容与创建节点

HTML 结构与事件绑定

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 自动获得焦点，引导用户输入内容。（细节加强用户体验）

 
window.onload = function() {
var user_name = document.getElementById("user_name");
user_name.focus();
} 

输入验证与内容动态更新

如果没有输入任何内容，给出错误提示，同时又让 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 动态创建，并添加到文档中！

 
//创建div元素
var text = document.createElement("div");
//把user_name.value的值添加到div元素中来
text.appendChild(user_name.value);
//最后将div元素添加到body中来
document.body.appendChild(text);