版权声明：本文为大都督作者的原创文章，未经 大都督 允许也可以转载，但请注明出处，谢谢！ 共勉！ https://blog.csdn.net/qq_37335220/article/details/85010870
1. 效果图
2. html代码
<!DOCTYPE html>
<html>
<head>
<title>3.10 使用$()函数动态创建节点元素</title>
<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 8px 8px}
.txt{border:#666 1px solid;padding:3px;width:120px}
.btn {border:#666 1px solid;padding:2px;width:60px;
filter: progid:DXImageTransform.Microsoft.
Gradient(GradientType=0,
StartColorStr=#ffffff,EndColorStr=#ECE9D8);}
</style>
</head>
<body>
<div class="divL"><p ></p >
<ul>
<li>元素名:
<select 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 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>
<script src="../jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//获取参数
$("#Button1").click(function() {
//获取元素名
var str1 = $("#select1").val();
//获取内容
var str2 = $("#text1").val();
//获取属性名
var str3 = $("#select2").val();
//获取属性值
var str4 = $("#text2").val();
//创建dom对象
var div = $("<"+str1+" "+str3+"='"+str4+"'>"+str2+"</"+str1+">");
//插入节点中
$(".divR").show().append(div);
})
});
</script>
</body>
</html>