创建节点元素

来源：互联网发布：淘宝虎扑识货推荐店铺编辑：程序博客网时间：2024/06/06 01:05
<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>动态创建节点元素</title>  <script src="jquery-1.8.0.js"></script> </head> <style type="text/css">body{font-size:13px;}ul{padding:0px;list-style:none;}ul li{line-height:2.0em;}.divL{float:left;width:200px;background-color:#eee;border:solid 1px #666;margin:5px;padding:0px 8px 0px 8px;}.divR{float:left;width:200px;display:none;border:solid 1px #ccc;margin:5px;padding:0px 8px 0px 8px;}.txt{border:#666 1px solid;padding:2px;width:120px;}.btn{border:red 1px solid;padding:2px;width:60px;filter:progid:DXImageTransform.Mocrisoft.gradient(GradientType=0,StartColorStr=#fff,EndColorStr=#ece9d8);} </style>  <script type="text/javascript">$(function(){$("#Button1").click(function(){var str1 = $("#select1").val();var str2 = $("#text1").val();var str3 = $("#select2").val();var str4 = $("#text2").val();var div = $("<"+str1+" "+str3+"='"+str4+"'>"+str2+"</"+str1+">");$(".divR").show().append(div);});}); </script> <body>  <div class="divL"><p></p><ul><li>元素名：<select name="" id="select1"><option value="p">p</option><option value="div">div</option></select></li><li>内容为：<input type="text" id="text1" class="txt" /></li><li>属性名：<select name="" id="select2"><option value="title">title</option></select></li><li>属性值：<input type="text" id="text2" class="txt" /></li><li style="text-align:center;padding-top:5px;"><input id="Button1" type="button" value="创建" class="btn" /></li></ul>    </div>  <div class="divR"></div> </body></html>
0 0