js 动态添加一个节点（或控件）

来源：互联网发布：js实现中英文切换代码编辑：程序博客网时间：2024/05/16 16:17

html部分：

<form action="" class="form">
<div id="form1"></div>
<p><a class="a" href="javascript:CreateEt();"><img src="image/add21.gif" width="15"/>添加一个文件</a></p>
<p><input id="submit" type="submit" class="btn btn-green" value="确认文件并上传"/></p>
</form>

Js 部分：

function $(id)
{
return document.getElementById(id);
}

function CreateEt()
{
      var   e=document.createElement("p");
      var newText = document.createTextNode("选择文件：");
       e.appendChild(newText);

       var    f = document.createElement("input");
       f.setAttribute("type","file");
       f.id="cil1";
       e.appendChild(f);


       var   mg=document.createElement("img");

       mg.setAttribute("src","image/delete.png");
       mg.style.cursor="pointer";
       mg.setAttribute("onclick","delEt(this)");
       e.appendChild(mg);


      var fnode= $("form1");
      fnode.appendChild(e);

}

效果图：

当点击添加一个文件的时候：

js 动态添加一个 节点（或控件）

js 动态添加一个节点（或控件）