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);

　　推荐阅读

　　基于jquery实现的上传图片及图片大小验证、图片预览效果代码

jquery实现上传图片及图片大小验证、图片预览效果代码 上传图片验证 复制代码 代码如下: */ function submit_upload_picture(){ var file = $('file_c').value; if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file>>>详细阅读

本文标题：javascript 学习笔记（一）DOM基本操作

地址：http://www.17bianji.com/kaifa2/JS/24696.html

 1/2    1