一、演示案例
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath }" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="${ctx}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${ctx}/easyui/themes/icon.css">
<script type="text/javascript" src="${ctx}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${ctx}/easyui/jquery.cookie.js"></script>
<script type="text/javascript" src="${ctx}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx}/easyui/locale/easyui-lang-zh_CN.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小白网页</title>
</head>
<body>
<h1>小白学习</h1>
语文成绩：<input type="text" id="chinese" placeholder="请输入"/><br>
数学成绩：<input type="text" id="math" placeholder="请输入"/><br>
<input type="button" value="录入系统" οnclick="entrySystem()"/>
<div id="dlg" class="easyui-dialog"
style="width: 500px; height: 400px; padding: 10px 20px" closed="true"
buttons="#dlg-buttons">
<div class="ftitle">小白二年级上期末成绩</div><br>
<div id="transcript"></div><!-- 弹出成绩单确认框 -->
</div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-ok" οnclick="submitScore()" style="width: 90px">提交</a>
<a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-cancel" οnclick="closeDlg()" style="width: 90px">关闭</a>
</div>
<script>
//录入系统
function entrySystem(){
$("#transcript").empty();//清空上一次动态加载的内容
var chinaScore=$("#chinese").val();
var mathScore=$("#math").val();
//换行元素创建
var br = document.createElement("br");
var br2 = document.createElement("br");
var br3 = document.createElement("br");
//获取div
var div = document.getElementById("transcript");
//添加label，存放文字
var label = document.createElement("label");
label.innerText = "语文成绩: ";
div.appendChild(label);
//添加input
var input = document.createElement("input");
input.setAttribute('type','number');
input.setAttribute('readOnly','true');
input.value = chinaScore;
div.appendChild(input);
//换行
div.appendChild(br); div.appendChild(br);
div.appendChild(br2);
//类似，动态去添加数学成绩
var label2 = document.createElement("label");
label2.innerText = "数学成绩: ";
div.appendChild(label2);
//添加input
var input2 = document.createElement("input");
input2.setAttribute('type','number');
input2.setAttribute('readOnly','true');
input2.value = mathScore;
div.appendChild(input2);
//打开并设置title
$('#dlg').dialog('open').dialog('setTitle', '确认框');
}
//关闭
function closeDlg() {
$('#dlg').dialog('close');
window.location.reload(); //刷新界面
}
</script>
</body>
</html>
二、案例说明
本案例演示了往空的<div>中动态加载元素的过程。首先放一个空的<div>，然后这样这样~，再那样那样~，就搞定了。我用的是EasyUI 框架，不用也是可以演示滴，看懂上面的案例后，自己去试试会理解的更深哦！有什么问题欢迎评论。
