Question

我动态创建一个无序列表，只需点击一下按钮就可以添加项目。我将此追加到具有contenteditable属性设置为true的部分。但是，我认为它不起作用。即使对于列表，我确实将contenteditable属性设置为true，但我想它应该从它所附加的部分继承。这是我正在做的代码。

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

这是我调用的函数

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

我做错了什么或不做什么？任何帮助赞赏。谢谢

Answer 1

该属性为contentEditable（注意大写字母'E'），而不是contenteditable。

section.contentEditable = "true";

Answer 2

您需要设置属性，而不是属性：

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

而不是

section.contenteditable = "true";

更多信息here和here（在jQuery的上下文中，但仍然非常精彩地介绍了这个主题）。

我目前对差异的理解是属性是你可以通过标记设置的东西（id，class，contenteditable等），而属性是表示DOM节点的实际javascript对象的属性。正如链接文章所提到的，这两者经常被浏览器保持同步，但并非总是如此。

编辑：正如Tim Down在他的回答中所述，虽然上述工作（设置属性），但实际问题是该属性的名称是错误的。它应该是

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

设置属性的原因是属性不区分大小写。

contenteditable不工作动态生成的元素

2 个答案: