1

我正在动态创建一个无序列表并通过单击按钮向其中添加项目。我将其附加到 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);
}

我做错了什么或没有做什么？任何帮助表示赞赏。谢谢

4

2 回答 2

3

该属性是contentEditable（注意大写的“E”），而不是contenteditable.

section.contentEditable = "true";
于 2013-10-23T08:18:01.257 回答
2

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

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

代替

section.contenteditable = "true";

更多信息here和here（在jQuery的上下文中，但仍然出色地涵盖了该主题）。

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

编辑：正如 Tim Down 在他的回答中所说，虽然上述方法有效（设置属性），但实际问题是属性名称的大小写错误。它应该是

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

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

于 2013-10-23T07:46:44.193 回答