如何在 JavaScript 中向全局变量追加新元素？

Question

嗯，我正在这个项目中使用 JavaScript 工作，并了解 DOM 如何从 js 操作 html。事情是，（下面的代码）

const templesElement='';
 
 
const displayTemples = (temples)=>{ 
    const templesDiv = document.getElementById("temples");
    templesDiv.innerHTML="<ol>";

    temples.forEach((element) => {
        templesDiv.innerHTML += `<li>${element.templeName} 

        </li>`;
        let article = document.createElement('article');
        let heading3 = document.createElement('h3');

       heading3.innerHTML = element.templeName;

        
        var img = document.createElement('img');
        
        
        img.src = "https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/";
        img.alt =element.location;

        article.appendChild(heading3);
        article.appendChild(img);
        
        templesElement.appendChild(article);

    });

    
    temples.innerHTML  = "</ol>";
    
}

我的这部分代码很难理解，我正在遍历一个数组并想要创建元素（就像在html中一样）但不接触html中的代码，只使用js。 代码的最后一部分 [templesElement.appendChild(article)]正在产生错误，首先它说templesElement.appendChild不是一个函数，但是当我查看W3schools时（https://www.w3schools.com/jsref/met_node_appendchild.asp ）我发现附加新元素的语法是正确的。

我的问题是，为什么显示错误？

注意 TemplesElement 是一个空的全局变量

还有其他方法在 DOM 中创建元素并追加吗？

Answer 1

根据对问题的评论，

templesElement

是：

const templesElement='';

那不是一个元素，而是一个字符串。并且字符串上确实没有名为

appendChild

的函数。

如果您只想要一个字符串，那么您可能会发现构建字符串而不是使用元素然后将它们转换为字符串更容易。但您也可以通过读取 其

outerHTML

属性将它们转换为字符串。

例如：

templesElement += article.outerHTML;

请注意，这重新分配给

templesElement

，因此您需要将其声明从

const

更改为

let

。

---

或者，如果您确实希望结果是一个元素，那么不要将其声明为字符串，请将其设为元素。例如：

const templesElement = document.createElement('div');

然后您就可以在该元素上使用

appendChild

。