我无法从存储为属性的 dom 元素更改 dom答案

【问题标题】：I can't change dom from dom element stored as an attribute我无法从存储为属性的 dom 元素更改 dom
【发布时间】：2017-01-16 00:41:31
【问题描述】：

如果已经有答案，我很抱歉，我没有发现任何有用的东西。

我正在开发一些需要更改其 html 代码的块的小 JS 代码。所以我有一个具有 2 种属性的主要对象：

带有 getHtml() 方法的自定义对象
使用 id 标签初始化的 dom 元素应该被更改。

我的第一个版本有效：我设置了一些 javascript 事件和方法，然后我的块内容被更改了。

当然（！）我需要修改代码以实现新功能，现在我的方法返回 html 代码，但我的变量上的 .innerHTML 不再起作用。

让我给你看一些代码并解释一下

var AtelierScreen = function(ancre, dataJson){
    if(!ancre.charAt)               throw "Invalid string-dealer name type ('"+ancre+"') should be String";
    if(ancre.length==0)             throw "Invalid string-dealer name ('"+ancre+"') cannot be empty";

    this.atelierContent;
    this.operationMenu;
    this.operationMenuContent;
    this.operationRecap;
    this.operationRecapContent;

    this.create=function(obj,tagsuffix){
        var tag = ancre+tagsuffix;
        this.atelierContent.innerHTML += "<div id='"+tag+"'></div>";
        var content = document.getElementById(tag);
        if(!content)        throw "Invalid html anchor using '"+tag+"' as an html id";
        content.innerHTML=obj.getHtml();
        return content;
    }

    try{
        var dataObject = JSON.parse(dataJson);
        this.atelierContent = document.getElementById(ancre);
        if(!this.atelierContent)            throw "Invalid html anchor using '"+ancre+"' as an html id";

        // MENU
        this.operationMenu = new OperationMenu(dataObject["dealer"],dataObject["operations"]);
        this.operationMenuContent=this.create(this.operationMenu,"_menu");
        this.operationMenuContent.innerHTML+="after init";

        // RECAP
        this.operationRecap = new OperationRecap();
        this.operationRecapContent=this.create(this.operationRecap,"_recap");
        this.operationMenuContent.innerHTML+="after recap init";

    } catch(error){
        throw "Error decoding json data :\n'"+error+"'\n\nJson =\n'"+dataJson+"'";
    }

    this.setSelectedModel=function(model){
        this.operationMenuContent.innerHTML+="setSelectedModel";
        var isTheSame = this.operationMenu.setSelectedModel(model);
        if(!isTheSame) this.clearOperationItemFromRecap();
        var temp = this.operationMenu.getHtml()
        this.operationMenuContent.innerHTML=temp;
    }
}

快速概览

我的所有属性和帮助初始化它们的方法。
尝试捕获以检查 json 数据。
我用方法初始化我的属性
与程序交互的一些方法

这就是发生的事情

正确解析的Json
我的第一个块已创建，返回其放在第一个内容属性中的 html 代码。我再次将一些文本添加到 dom 中作为测试（它有效）
我的第二个块已创建，返回其放在第二个内容属性中的 html 代码。我在第一个内容属性中再次添加了一些文本作为测试。此时它失败了。
我的方法没有任何帮助。我的内容属性似乎没有响应。

我仍然可以获取内容属性值 atelierScreen.operationMenuContent.innerHTML；但我无法在 dom 中插入文本。 atelierScreen.operationMenuContent.innerHTML=""; 什么都不做。

我是否需要使用 document.getElement ... EACH TIME 查询 dom？我以前使用 dom 元素作为属性的版本正在运行...

我错过了一些东西，这太令人沮丧了；）请帮忙。谢谢

【问题讨论】：

标签： javascript dom innerhtml

【解决方案1】：

经过一番研究，可能是因为使用了 innerHTML。看起来使用 innerHTML 会破坏子元素。

我需要先解决这个问题，但我会尝试类似的方法：

用标签和内容参数创建块“抽象”父类，用标签创建构造函数

原型 getContent() 将如下所示：

if(content==null) content = document.getElementById(this.tag);
return content;

用我的对象数组初始化我的主“屏幕”对象
循环数组以获取标签并初始化innerHTML
循环数组以实例化对象
getContent 将处理其余部分。

我会给你一些反馈

【讨论】：

【解决方案2】：

好的，我就是这样做的

var AtelierScreen = function(ancre, dataJson){
try{
    var dataObject = JSON.parse(dataJson);
    this.atelierContent = document.getElementById(ancre);
    if(!this.atelierContent)            throw "Invalid html anchor using '"+ancre+"' as an html id";

    var blocks = [
        this.operationMenu   = new OperationMenu(...),
        this.operationRecap  = new OperationRecap(...),
        this.operationResult = new OperationResult(...)
    ];

    for (var i = 0; i < blocks.length; i++) {
        var block=blocks[i];
        this.atelierContent.innerHTML += "<div id='"+block.tag+"'></id>";
    }

    for (var i = 0; i < blocks.length; i++) {
        var block=blocks[i];
        block.getContent().innerHTML = block.getHtml();
    }
} catch(error){
    throw "Error decoding json data :\n'"+error+"'\n\nJson =\n'"+dataJson+"'";
}
}

我在 try/catch 中解析 Json 参数
我创建了屏幕元素，它将用于初始化我的锚点
我同时创建了我的块数组并初始化了我的对象（我不确定它是否会起作用，如果稍后会找到这些属性，但确实如此）。 Onjects 包含它们的锚点和内容参数。
第一个循环添加块锚
创建 html 内容的第二个循环

【讨论】：