javascript - jQuery 附加 html 问题

Question

我正在尝试将一个 div 中的值附加到另一个 div 中。

这是 HTML:

<div>
<input id="appendval" type="text" class="formStyle" style="width:300px">&nbsp;&nbsp;
    <a id="addtolist" onClick="appendthis()" href="javascript:void(0)">Add</a><br><br>
    <div id="addedlist" style="width:300px;height:80px;border:1px #ccc solid;"></div>

    <div id="valdiv" style="display:none">
        <div>
            <img onClick="removethis(this)" src="http://www.penguinmodernclassics.ca/static/images/all/close_icon.gif" >
        </div>
    </div>

</div>

脚本:

function appendthis() {
    var values = jQuery('#appendval').val();
    jQuery('#valdiv img').after(values);
    jQuery('#addedlist').append(jQuery('#valdiv').html());
    jQuery('#appendval').val('');
}
function removethis(cur) {
    jQuery(cur).closest('div').remove();
}

问题是每次我单击添加时，先前的值都会与新值相加。

您可以在这里看到上面的代码:http://jsfiddle.net/prajan55/3MRK9/

请帮忙...

Answer 1

问题是，在将旧文本添加到图像后面后，您没有删除旧文本。您需要一个额外的容器来容纳文本，以便您可以轻松清除它:

http://jsfiddle.net/3MRK9/2/