JavaScript全局变量调用appendChild报错原因及DOM元素创建方案咨询

问题描述 #

我正在进行一个JavaScript项目，学习如何通过JS操作DOM以控制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>";
    
}

我遍历数组并希望仅通过JS创建HTML元素，不修改HTML代码。但代码中templesElement.appendChild(article)报错，提示“templesElement.appendChild不是函数”，我查阅W3schools发现语法无误。请问报错原因是什么？另外，还有哪些创建并追加DOM元素的方法？注：templesElement是一个空的全局变量。

报错原因分析 #

templesElement被初始化为空字符串''，属于字符串类型，而appendChild是DOM元素节点专属的方法，只有DOM对象（比如通过document.getElementById获取的页面元素）才能调用该方法，字符串根本没有这个方法，所以会抛出错误。你需要先将templesElement赋值为页面上实际存在的DOM容器（比如用document.getElementById('某个容器ID')获取），才能正常调用appendChild。

其他创建并追加DOM元素的方法 #

• Element.append()：比appendChild更灵活，支持一次性追加多个节点或文本内容，例如：

  templesElement.append(article, '附加说明文本');
  

• Node.insertBefore()：可以在指定的子节点之前插入新元素，语法为父元素.insertBefore(新元素, 参考子元素)，如果参考子元素传null，效果等同于追加到父元素末尾。
• Element.prepend()：将元素追加到父元素的第一个子节点位置，和append的末尾追加相反，例如：

  templesElement.prepend(article); // 把article放在最前面
  

• Element.insertAdjacentElement()：支持在元素的四个不同位置插入新元素，位置参数可选：beforebegin（元素外部前方）、afterbegin（元素内部开头）、beforeend（元素内部末尾，等价于appendChild）、afterend（元素外部后方），示例：

  templesElement.insertAdjacentElement('beforeend', article);
  

• DocumentFragment批量追加：如果需要创建多个元素并一次性添加到DOM，可以用文档片段先暂存元素，最后再追加到父元素，能减少DOM重排次数，提升性能：

  const fragment = document.createDocumentFragment();
  fragment.appendChild(article);
  // 可以继续添加更多元素到fragment
  templesElement.appendChild(fragment);
  

内容的提问来源于stack exchange，提问作者user23554738