<div>动态添加元素演示

梦里梦外; 2023-07-01 08:33 62阅读 0赞

## 一、演示案例 ##

<%@ 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="录入系统" onclick="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" onclick="submitScore()" style="width: 90px">提交</a>
    	<a href="javascript:void(0)" class="easyui-linkbutton"
    		    iconCls="icon-cancel" onclick="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 框架，不用也是可以演示滴，看懂上面的案例后，自己去试试会理解的更深哦！有什么问题欢迎评论。