contenteditable not working on dynamically generated elements

Question

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.

// 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);});

Here is the function I call

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);
}

What am I doing wrong or not doing? Any help appreciated. Thanks

score 3 · Answer 1 · answered Oct 23 '13 at 08:18

3

The property is contentEditable (note upper-case 'E'), not contenteditable.

section.contentEditable = "true";

answered Oct 23 '13 at 08:18

Tim Down

318,141
75
454
536

score 2 · Accepted Answer · edited May 23 '17 at 12:21

2

You need to set the attribute, not the property:

section.setAttribute('contenteditable', 'true');

Instead of

section.contenteditable = "true";

Some more info here and here (in the context of jQuery, but covers the topic splendidly nonetheless).

My current understanding of the difference is that attributes are the things you can set through markup (id, class, contenteditable, etc.), whereas properties are the properties of the actual javascript objects representing the DOM nodes. As the linked article mentions, the two are often kept in sync by the browser, but not always.

Edit: As Tim Down states in his answer, while the above works (setting the attribute), the actual problem is that the name of the property is cased wrong. It should be

section.contentEditable = "true"; //Note the upper case 'E'

The reason setting the attribute works, is that attributes are case-insensitive.

edited May 23 '17 at 12:21

Community

1
1

answered Oct 23 '13 at 07:46

rusmus

1,665
11
18

Thanks a lot. That solves it. Phew! I get the difference now. – user592748 Oct 23 '13 at 07:55
1

That isn't the problem. The problem is that the property is `contentEditable` (note upper-case 'E'), not `contenteditable`. The property definitely is kept in sync with the attribute, and it's almost always a better idea to use the property rather than `setAttribute()` and `getAttribute()`. – Tim Down Oct 23 '13 at 08:17
Also, I think every standard atttribute has an equivalent property which changes as the attribute changes and vice versa. The confusion comes from attributes such as `value` on inputs: that attribute is reflected in the `defaultValue` property, not the `value` property (which is what represents the actual current value of the input). The article you linked to has many inaccuracies. – Tim Down Oct 23 '13 at 08:32
You are right @tim-down. I edited my answer to include the correct info. If you can point me to a better article explaining the differences, I would be happy to update/add the link. – rusmus Oct 23 '13 at 09:49
There isn't a really good article explaining it that I can find. There are a few references on Stack Overflow, such as [this answer of mine](http://stackoverflow.com/a/5876747/96100) but nothing definitive. – Tim Down Oct 23 '13 at 10:13

contenteditable not working on dynamically generated elements

2 Answers2