通过JS API创建的h1元素文本未显示，如何排查解决？

问题出在你对h1元素的属性设置逻辑上：

• 你给h1添加了src和alt属性，这两个是<img>标签的专属属性，h1作为标题元素完全不会识别这两个属性，所以文本根本不会被渲染出来。
• 要给h1设置显示的文本，必须使用textContent（推荐用于纯文本场景）或者innerHTML（可解析HTML内容）属性。

修正后的JS代码 #

fetch(GITHUB_URL) 
.then(function(response) {
 return response.json();
 })
.then(function (data) {
 const img = document.createElement('img'); 
 img.src = data.avatar_url;
 img.alt = 'Github prof'
 document.querySelector(".profile-image").appendChild(img); 

 const h1 = document.createElement('h1');
 // 替换为正确的文本设置方式
 h1.textContent = data.name;
 document.querySelector(".profile-name").appendChild(h1);
});

补充说明 #

• textContent会直接设置元素的纯文本内容，不会解析HTML标签，适合你这种仅需展示普通文本的场景。
• 如果后续需要给h1添加样式或其他属性，可继续使用h1.classList.add()或h1.setAttribute()操作，但核心文本内容必须通过textContent/innerHTML设置。

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