首先看完整示例：
|
|
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代码中的<p id="test"></p>完全可以不用，我们可以利用DOM动态创建，并添加到文档中！
|
var text = document.createElement("p"); text.appendChild(user_name.value); document.body.appendChild(text); |