Append text and value using JQuery

[rwilson]

I want to wrap each value submitted in <li> tags to create a list below it but I can't figure out how to append the tags and use the value together. Any help would be greatly appreciated

<form id="edit" action="destination.html">
<input id="editInput" type="text" />
<input type="submit" value="Add" />
</form>
<ul id="output" contenteditable="true">

</ul>
</section>



$(function() {

var editText = $('#editInput').val();

$('#edit').submit(function() {
$('#output').append($('#editInput').val());

return false;
});

[rwilson]

Basically, I want to know the correct syntax for this:

.append($('<li>$('#editInput')</li>'));

[Fotiman]

.append('<li>' + $('#editInput').val() + '</li>');

[rwilson]

Thank you so much! I appreciate the help.

[rwilson]

When I try to use the ".deleteThis" function it doesn't work on <li> tags created after page load. Is there a way I can apply the function to new <li> tags?

 $('#edit').submit(function() {
 $('#output').append('<li><span contenteditable="true">' + $('#editInput').val() + '</span><span class="deleteThis">X</span></li>');
 localStorage.setItem('todoData', $('#output'));  
 return false;
});
 
 $(".deleteThis").click(function() {
 alert('Handler for .deleteThis() called.');
 //$("li").remove();
 $(this).parent('li').hide();
 });
});

[Fotiman]

It doesn't work because you're attaching the handler to the click event of all elements with class "deleteThis" before you've created them in the submit function.

Try this:

$('#edit').submit(function() {
  var toggleEl = $('<span class="deleteThis">X</span>').click(function() {
    alert('Handler for .deleteThis() called.');
    $(this).parent('li').hide();
  });
  $('#output').append('<li><span contenteditable="true">' + $('#editInput').val() + '</span>' + toggleEl + '</li>');
  localStorage.setItem('todoData', $('#output')); 
  return false;
});

Not sure if that will work, but give it a try. :)