title: How to make <li> editable on click?
body: <p>I have a menu that looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/TwPzD.png" alt="enter image description here"></p>
  
  <p>I want to make it possible that when the user clicks on <code>+</code> the <code>&lt;li&gt;</code> element that it's located inside becomes like an editable input form, where a new menu item name can be created and saved (by entering the name and clicking Enter).</p>
  
  <p>The code of the current item is </p>
  
  <pre><code>&lt;li id="addNewContext" class="menu-item-divided"&gt;&lt;a href="javascript:"&gt;+&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>Is there a snippet of code I could use to make that field editable that could save the name entered into an array, which I can then use to repopulate the menu?</p>
  
  <p>Thanks!</p>