Then, to edit the <li>, you would click the "Edit" button to:
1) Set the value of the hidden textbox to the text within the <p> element.
2) Hide the <p> element.
3) Show the hidden textbox
4) Change the text of the edit button to show that you are saving changes.

$("#editLI1Button").click(function() {// jQuery object for the <p> element. Could be a little simpler if the <p> has an id.var p = $("li1 p").eq(0), textbox = $("editLI1");if (this.value === 'Edit') {// set the value of the hidden textbox and show the textboxtextbox.val(p.text()).show();// hide the <p> elementp.hide();// set the value of the "Edit" buttonthis.value = "Save";}else if (this.value === "Save") {// save the value from the textbox, show the <p> elementp.text(textbox.val()).show();// hide the textbox and clear its valuetextbox.val('').hide();// set the value of the button back to "Edit"this.value = "Edit";}}); // end of function

There is pretty wide support for the contentEditable attribute. Instead of trying to play some magic with aligning inputs to display over list items, consider using hidden inputs and contentEditable.

Possible steps:
1) You make your list items 'contentEditable'
2) You place hidden text inputs in your code
3) You 'link' the list items with a specific input (ie: <li data-id="1"> and <input id="1">)
4) You run some javascript that fires on 'keyup' that copies data to hidden fields when a list item is edited.

Featured Post

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use.
Why should I use jQuery as opposed to regular JavaScript?
Now I know…

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX.
The logical flow for the problem should be:
Write an event handler for the first drop down box to get …

The viewer will learn the basics of jQuery, including how to invoke it on a web page.
Reference your jQuery libraries: (CODE)
Include your new external js/jQuery file: (CODE)
Write your first lines of code to setup your site for jQuery.: (CODE)