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

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

• javascript
• html
• contenteditable

2 Answers 2

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

section.contentEditable = "true";

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.