实现动态创建html元素功能

#divLeft

{

float: left;

width: 300px;

height: 400px;

margin-right: 10px;

}

#divRight

{

float: left;

width: 500px;

height: 600px;

border: 1px solid red;

}

$(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 += '' + $('#txtValue').val() + '' + " ";

$('span').text(strAdd + " " + strAddOption);

}

}

})

$('#txtValue').focus(function () {

$('#txtValue').val('');

})

$('#Button1').click(function () {

var YSstr = $('#Select1').val();

if (YSstr == 'img') {

var str = $('');

$('#divRight').append(str);

}

else if (YSstr == 'p') {

var str = $('' + $('#txtContent').val() + '');

$('#divRight').append(str);

}

else {

var str = $('' + strAddOption + '');

$('#divRight').append(str);

}

})

})

元素名:pimgselect

属性widthheightsrcmultiplevalueclassidoption

属性值：

内容：