Kiroyasha Kiroyasha - 1 year ago 74
HTML Question

I want to create a button along my prepend list item

I recently started JQuery and I need to create a list using the datepicker JQuery function. The problem starts with my prepend because I have to prepend the date I get from the datepicker, the event AND a new button to ERASE whatever's in that line (so the button must be prepended along the list item). I'm having some trouble with this part.

This is the code I have:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display month &amp; year menus</title>
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>

<link rel="stylesheet" href="css.css">

$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true

$(document).on('click', '#bta', '#apagar', function () {

if ($('#datepicker').val() != '' && $('#evento').val() != '' ) {
$('#caixa').prepend('<p>' + $('#datepicker').val() + $('#evento').val() + $('<input type="button" id="apagar" value="apagar" />') + '</p>');



<div id="box">
Lista de Tarefas:
Date: <input type="text" id="datepicker"> &nbsp; &nbsp;

Event: <input type="text" id="evento"> <button id="bta" class="bta">+</button>

<div id="caixa"> </div>


I'm pretty sure this is probably very simple but I've only now started looking around and everything I try to search is either overly complex or doesn't resolve my issue... of course my inability to implement the solutions I find might be very well a problem too.

This is to help visualize my problem

Answer Source

jQuery.prepend takes argument that are htmlString or Element or Array or jQuery elements. You choose a htmlString, but are adding a jQuery object to this string. This will obviously not work.

What do we actually want? Well, we want to create a <p> tag, then append the datepicker value, the event value and then the button.

var $p = $("<p></p>");
$p.append($('#datepicker').val(), $('#evento').val(), $('<input type="button" id="apagar" value="apagar" />'));

Alternatively, skip the step where you turn a string into a jquery object, back into a string.

$('#caixa').prepend('<p>' + $('#datepicker').val() + $('#evento').val() + '<input type="button" id="apagar" value="apagar" /></p>');
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download