StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POcontenteditable not working on dynamically generated elements
text
Body
copied!<p>I am dynamically creating an unordered list and adding items to it on a click of a button. I append this to a section that has contenteditable attribute set true. However, I do not see it working. I did set the contenteditable attribute to true even for the list but I guess it is supposed to inherit that from the section it is appended to. Here is the code of what I am doing. </p> <pre><code>// create text input var categoryInput = document.createElement('input') // create button to add the text entered to a list var btnAddToList = document.createElement('input'); btnAddToList.type ="button"; //create a section to add a list to var section = document.createElement('section'); var ul=document.createElement('ul'); section.appendChild(ul); section.contenteditable = "true"; ul.contenteditable = "true"; //create an event handler to add to the list if (btnAddToList.addEventListener) { btnAddToList.addEventListener('click', function () { addToList(ul, categoryInput.value);}); } else if (btnAddToList.attachEvent) { btnAddToList.addEvent('click', function () { addToList(ul, categoryInput.value);}); </code></pre> <p>Here is the function I call</p> <pre><code>function addToList(unorderedlist, inputText) { if(inputText.length == 0) { alert("Add Text"); return; } var listitem = document.createElement('li'); var listvalue = document.createTextNode(inputText); listitem.appendChild(listvalue); unorderedlist.appendChild(listitem); } </code></pre> <p>What am I doing wrong or not doing? Any help appreciated. Thanks </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload