html部分代码：

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

复制代码 代码如下:

<p>

<input type="text" value="" name="user_name" id="user_name" />

<span><input type="button" value="show" /></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);