jQuery动态创建节点元素

来源：互联网发布：ai做淘宝照片编辑：程序博客网时间：2024/06/10 00:43

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
#divLeft
{
float: left;
width: 300px;
height: 400px;
border: 1px solid red;
margin-right: 10px;
}
#divRight
{
float: left;
width: 500px;
height: 600px;
border: 1px solid red;
}
</style>
<script type="text/javascript">

$(function () {
var strAdd = '';
var strAddOption = '';
var strAddOptionValue = '';
$('#txtValue').blur(function () {
if ($(this).val() == '') {
$('#txtValue').val('请输入属性名');
}
else {
var sel2 = $('#Select2 :checked').text();
if (sel2 == 'width') {
strAdd += 'width=' + $('#txtValue').val() + " ";
$('span').text(strAdd);
}
else if (sel2 == 'height') {
strAdd += 'height=' + $('#txtValue').val() + " ";
$('span').text(strAdd);
}
else if (sel2 == 'src') {
strAdd += 'src=' + $('#txtValue').val() + " ";
$('span').text(strAdd);
}
else if (sel2 == 'multiple') {
strAdd += 'multiple=' + $('#txtValue').val() + " ";
$('span').text(strAdd);
}
else if (sel2 == 'value') {
if ($('#Select1').val() == 'select') {
strAddOptionValue = 'value=' + $('#txtValue').val() + " ";
$('span').text(strAdd + " " + strAddOption + " " + strAddOptionValue);
}
else {
strAdd += 'value=' + $('#txtValue').val() + " ";
$('span').text(strAdd);
}
}

else if (sel2 == 'class') {
strAdd += 'class=' + $('#txtValue').val() + " ";
$('span').text(strAdd);
}
else if (sel2 == 'id') {
strAdd += 'id=' + $('#txtValue').val() + " ";
$('span').text(strAdd);
}
else if (sel2 == 'option') {
strAddOption += '<option ' + strAddOptionValue + ' >' + $('#txtValue').val() + '</option>' + " ";
$('span').text(strAdd + " " + strAddOption);
}
}
})

$('#txtValue').focus(function () {
$('#txtValue').val('');
})

$('#Button1').click(function () {
var YSstr = $('#Select1').val();

if (YSstr == 'img') {
var str = $('<' + YSstr + ' ' + strAdd + '/>');
$('#divRight').append(str);
}
else if (YSstr == 'p') {
var str = $('<' + YSstr + '>' + $('#txtContent').val() + '</' + YSstr + '>');
$('#divRight').append(str);
}
else {
var str = $('<' + YSstr + ' ' + strAdd + '>' + strAddOption + '</' + YSstr + '>');
$('#divRight').append(str);
}

})

})
</script>
</head>
<body>
<div id="divLeft">
元素名：<select id="Select1">
<option value="p">p</option>
<option value="img">img</option>
<option value="select">select</option>
</select>
<br />
<br />
属性：<select id="Select2">
<option value="width">width</option>
<option value="height">height</option>
<option value="src">src</option>
<option value="multiple">multiple</option>
<option value="multiple">value</option>
<option value="src">class</option>
<option value="multiple">id</option>
<option value="multiple">option</option>
</select>
<br />
<br />
属性值：<input id="txtValue" type="text" value="请输入属性值：" />
<br />
<br />
内容：<input id="txtContent" type="text" />
<br />
<br />
<span></span>
<input id="Button1" type="button" value="创建" />
</div>
<div id="divRight">
</div>
</body>
</html>