jquery - 如何将输入值添加到包含在 div 标签之间的内容中 - jQuery

Question

我有一个文本类型的输入和一个按钮。在输入中输入一个值并点击按钮后，内容会在 div 中打印。HTML 代码如下所示

    <div id="content">
        <input type="text" value="" class="input-value" />
        <button type="button" id="push" onclick="appendInput()";>push me</button>
        <div id="todo"></div>
    </div>

并且将输入值附加到某个 div 的函数看起来像这样

        function appendInput() {
            $('#todo').append($('.input-value').val());
        }

输入的内容已发送，但它只是在现有值之后继续添加。如果我输入lorem并点击按钮，然后我再次输入ipsum并再次点击按钮，结果是

    <div id="todo">loremipsum</div>

这给我带来了我无法解决的问题。单击按钮时，值会连续添加到#todo div 中。如何从包含在 div 标签之间的输入中发送每个发送的值？为了得到这样的结果

    <div id="todo">
        <div>lorem</div>
        <div>ipsum</div>
    </div>

Answer 1

将您的功能更改为此...

function appendInput() {
    $('#todo').append('<div>' + $('.input-value').val() + '</div>');
}

这将自动添加包装在 div 中的每个值。