我想用前置jQuery添加一个元素

Question

我想在单击按钮时添加一个新元素，但是它不起作用

<div id="add-container">
    <input type="text"> <button>add</button>
    <div id="megobrebi">
        <a>Levani</a>
        <a>Markozi</a>
        <a>Zuka</a>
        <a>Sandro</a>
    </div>
</div>

$(document).ready(function() {
    $('#add-container').on('click', 'button', function(){
        var value = $('#add-container input').val;
        var html = '<a>' + value + '</a>'
        $('$megobrebi').prepend(html);
    })
})

Answer 1

您在按钮上的click事件的处理程序中有两个错误。

首先，您需要调用jQuery val方法以获取输入的值。

其次，要在其前面添加DOM元素的选择器不正确。

因此，代码应为：

$('#add-container').on('click', 'button', function(){
    var value = $('#add-container input').val();
    var html = '<a>' + value + '</a>'
    $('#megobrebi').prepend(html);
})

Answer 2

最后一行应该是

$('#megobrebi').prepend(html);

Answer 3

将您的脚本代码更改为

$(document).ready(function() {
    $('#add-container button').on('click', function(e){
        e.preventDefault(); // You may use this line if you wish to disable the default functionality button.
        var value = $('#add-container input').val();
        var html = '<a>' + value + '</a>';
        $('#megobrebi').prepend(html);
    });
});