本文介绍在JSP或前端开发中，如何利用JavaScript动态创建HTML标签。内容涵盖使用createElement生成元素、通过setAttribute和className设置属性、为元素绑定带参或不带参的事件监听器，以及使用replaceChild替换现有节点以解决覆盖问题，提供完整代码示例。
动态创建DOM元素的需求背景
在开发JSP页面时，常会遇到从后台获取的数据数量不确定的情况，导致前端页面结构难以预先固定。此时，需要通过JavaScript动态生成对应的HTML标签来适应数据变化。
创建基础HTML标签
首先演示如何创建一个基础标签，例如在body元素内部动态生成一个div元素。
<script>
function fun(){
var frameDiv = document.createElement("div");//创建一个标签
var bodyFa = document.getElementById("bodyid");//通过id号获取frameDiv 的父类（也就是上一级的节点）
bodyFa .appendChild(frameDiv);//把创建的节点frameDiv 添加到父类body 中；
}
<script>
<body id="bodyid" >
<!--在此添加div标签-->
</body>
设置标签属性与内容
接着，为创建好的标签添加必要的属性，例如设置ID和CSS类名，或者填充内容。
frameDiv .setAttribute("id", "divid");//给创建的div设置id值；
frameDiv .className="divclass"; //给创建的div设置class；
//给某个标签添加显示的值；
var h = document.createElement("h1");
h.innerHTML = data[i].name;
var p = document.createElement("p");
p.innerHTML = "要显示的值";
绑定事件处理函数
此外，还需要为动态创建的标签绑定相应的事件处理函数。
对于不需要传递额外参数的事件，可以直接将函数名赋值给事件属性。
frameDiv.onmousedown = fun;//ps：函数名fun后面一定不能带括号，否则会在创建标签的时候执行函数， 而不是鼠标按下时执行；若事件处理函数需要接收参数，则需通过匿名函数进行封装调用。
frameDiv.onmousedown = function(){ fun(this); }以下是具体实现该事件处理函数的代码示例。
function fun(){
alert("鼠标按下");
}替换现有节点防止覆盖
如果担心动态创建的标签会被原有元素覆盖，可以使用replaceChild方法将旧节点替换为新节点。
var divFlag = document.getElementById("divFlag");
var divMain = document.createElement("div");
if(divFlag != null){
body.replaceChild(divMain, divFlag);//把原来的替换掉
}
divMain.setAttribute("id", "divFlag");以上即为通过JavaScript动态创建标签并设置属性与事件的完整方法，供开发者参考使用。