从输入类型创建元素='；文本'；JavaScript

我想用输入类型文本中的信息创建DOM元素。更具体地说： 我希望用户能够写一个位置，在他按下“Go！”按钮后，创建一个插入文本的元素，我还希望有一个删除图标，按下该图标可删除插入内容

我创建了一个函数，其中我接受了输入值，但无法创建“del”按钮

如果我使用相同的方法在内部创建另一个

，当我创建第二个条目时，它会将另一个

放在前一个条目上

 search_btn.click(function() {

    var place_reg = /^[a-z]+\d*[a-z]*(\s[a-z]+\d*[a-z]*)*?$/i;
    var search_value = search_box.val();
    var final_result = search_value.trim();

    if (place_reg.test(final_result)) {

        createDest(final_result);           

    } else {

        alert('Please insert a valid destination');
    }

    document.getElementById('search_box').value = "";
});

function toTitleCase(str) {

    return str.replace(/\w\S*/g, function(txt){ return txt.charAt(0).toUpperCase() + 
 txt.substr(1).toLowerCase();});
}

function createDest(value) {

    var destination_i_search = document.createElement("div");
    destination_i_search.innerHTML = toTitleCase(value);
    destination_i_search.setAttribute("class" , "place");       
    $("#dest").append(destination_i_search);            

}

---

如果没有完整的示例，很难理解您希望它做什么，但从评论中，您可能希望看到以下内容：

JSFiddle：

我已经在适当的地方将其转换为使用jQuery

var search_btn = $('#search');
var search_box = $('#searchbox');

search_btn.click(function () {
    var place_reg = /^[a-z]+\d*[a-z]*(\s[a-z]+\d*[a-z]*)*?$/i;
    var search_value = search_box.val() || "";
    var final_result = search_value.trim();
    if (place_reg.test(final_result)) {
        createDest(final_result);
    } else {
        alert('Please insert a valid destination');
    }
    search_box.val("");
});

function toTitleCase(str) {
    return str.replace(/\w\S*/g, function (txt) {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
}

function createDest(value) {
    // use a div container
    var div = $("<div/>");
    div.html(toTitleCase(value));
    div.addClass("place");
    // If you want to replace the previous entry
    $("#dest").append(div);
    var del = $('<input class="delete" type="button" value="X"/>');
    $("#dest").append(del);
}

// This is a delegated event handler, attached to a non-changing ancestor
$(document).on('click', '.delete', function(){
    // Remove the previous div (if of class place)
    $(this).prev('.place').remove();
    // Remove the delete button too
    $(this).remove();
});

---

问题在于您没有显示的代码。请展示其余部分（例如JSFIDLE中的HTML示例也不错）：）您有这个标记的jQuery，但没有使用jQuery。如果您这样做，代码会更短/更简单，那么JQuery是您的一个选项吗？是的，我也使用JQuery，但我不太习惯。我在Jquery文档中找不到我需要的内容。您需要提供一个更好的示例。e、 g.我看不到您在哪里添加删除按钮。它的添加方式与目标搜索相同。它的父元素是destination_i_search元素。Var del=document.createElement（'img'）是，这就是我想要的。我会提供th3完整的代码，当我回家

$('#dest').on('click', '.delete', function(){