使用JavaScript向HTML元素追加菜单时仅输出文本而非DOM元素的问题

出现这个现象的核心原因是DOM节点prepend、append方法的参数处理规则：

• 这类方法接收字符串类型的入参时，会直接将字符串作为纯文本节点插入页面，不会把字符串内的<nav>、<ul>等标签解析为对应的HTML元素
• 这就导致你编写的整段导航菜单代码，全被当成普通文本输出，没有渲染成预期的菜单结构。

方法1：使用insertAdjacentHTML插入解析后的HTML（最贴合原有逻辑） #

这个方法专门用来把字符串形式的HTML解析成真实DOM节点，插入到指定位置，它的afterbegin插入位置和你原本用的prepend完全一致——都是插在目标元素内部的最开头，不会覆盖原有的页面内容。
把你原本的插入代码替换成以下写法即可：

// 原有mainMenu的定义逻辑保持不变
const mainMenu = `
    <nav>
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">SHOP</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">CONTACT US</a></li>
            <li><a href="#">LOGIN</a></li>
        </ul>
    </nav>`

// 替换原有的prepend插入逻辑
document.querySelector("main").insertAdjacentHTML('afterbegin', mainMenu)

方法2：解析HTML字符串为DOM节点后再用prepend插入 #

如果你想继续使用prepend方法，可以先手动把HTML字符串解析成真实的DOM元素，再把解析好的元素传入prepend，代码如下：

// 原有mainMenu的定义逻辑保持不变
// 创建临时容器解析HTML字符串
const tempContainer = document.createElement('div');
tempContainer.innerHTML = mainMenu;
// 提取解析完成的导航元素，插入到main开头
document.querySelector("main").prepend(tempContainer.firstElementChild)

注意：不要直接给main元素的innerHTML属性赋值整段菜单代码，这种写法会直接覆盖掉main标签里原有的h3、段落等所有内容，和你的预期逻辑不符。

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