NotFoundError：替换innerHTML时出现DOM异常8答案

【问题标题】：NotFoundError: DOM Exception 8 when substituting innerHTMLNotFoundError：替换innerHTML时出现DOM异常8
【发布时间】：2013-06-10 13:49:17
【问题描述】：

我是 js 开发的新手。我有以下代码：

<html>
<body>

<div><span id="inline">Click here to start editing</span></div>

<script>
    var inline = document.getElementById("inline");     
    inline.onclick = function() {           
        if (!inline.editable) {
            var text = inline.innerText;
            inline.innerHTML = "<input type='text' id='inline-editable'>";
            inline.editable = true;
            var inline_editable = document.getElementById("inline-editable");
            inline_editable.value = text;

            inline_editable.onblur = function() {
                var value = inline_editable.value;                  
                inline.editable = false;
                inline.innerHTML = value;
            }

            inline_editable.onkeypress = function(event) {
                if (event.keyCode == 13) {
                    inline_editable.onblur();
                }
            }               
        }
    }
</script>
</body>

</html>

在span 中显示一些文本并允许内联编辑。当我在 onblur 事件中完成编辑时，它工作得非常好。但是，如果我想通过 Enter 终止编辑并使用相同的处理程序，我会在此行中收到错误 NotFoundError: DOM Exception 8：

inline.innerHTML = value;

尽管如此，一切都按我的预期进行。谁能帮我避免这个错误？

我认为这是因为我在事件处理尚未完成时销毁了 inline-editable 元素并且它可能想要调用 onchange。我是否应该一直有 2 个控件来切换它们的可见性？

【问题讨论】：

不，不应该，HTML5 不是 XML。您可以使用不带尾随 /. 的自闭合标签
@KhanhTO 这不会有任何影响！
只是一个快速调试，onblur 被触发了两次

标签： javascript dom dom-events innerhtml

【解决方案1】：

这里的问题是 onblur 被触发了两次，第二次，导致问题的元素不存在。杀死事件

var inline = document.getElementById("inline");     
inline.onclick = function() {

    if (!inline.editable) {
        var text = inline.innerText;
        inline.innerHTML = "<input type='text' id='inline-editable'>";
        inline.editable = true;
        var inline_editable = document.getElementById("inline-editable");
        inline_editable.value = text;

        inline_editable.onblur = function() {
            this.onblur = function(){};
            var value = this.value;
            inline.editable = false;
            inline.innerHTML = value;
        }

        inline_editable.onkeypress = function(event) {
            if (event.keyCode == 13) {
                this.onblur();                    
            }
        }               
    }
}

【讨论】：