如何将JavaScript变量中的HTML代码渲染为页面导航栏？

方法1：使用innerHTML属性 #

这是最直接的实现方式，先在页面中准备一个容器元素，再把变量里的转义HTML赋值给容器的innerHTML属性，浏览器会自动解析转义字符并渲染成实际元素：

// 你的转义HTML变量
const z = 
    "<section class="vh-100" style="background-color: #5f59f7;">\n    <div class="container py-5 h-100">\n      <div class="row d-flex justify-content-center align-items-center h-100">\n        <div class="col col-xl-10">\n          <div class="card mb-5" style="border-radius: 15px;">\n            <div class="card-body p-4">\n              <h3 class="mb-3">Program Title</h3>";

// 获取页面上的目标容器（比如提前定义好id为nav-container的div）
const container = document.getElementById('nav-container');
// 赋值后自动渲染
container.innerHTML = z;

⚠️ 注意：如果HTML来自不可信的外部数据源，直接用innerHTML会存在XSS攻击风险，需要先做安全过滤处理。

方法2：使用insertAdjacentHTML方法 #

这个方法可以灵活指定HTML插入的位置，适合不需要覆盖容器原有内容的场景：

const z = 
    "<section class="vh-100" style="background-color: #5f59f7;">\n    <div class="container py-5 h-100">\n      <div class="row d-flex justify-content-center align-items-center h-100">\n        <div class="col col-xl-10">\n          <div class="card mb-5" style="border-radius: 15px;">\n            <div class="card-body p-4">\n              <h3 class="mb-3">Program Title</h3>";

// 将HTML插入到容器内部的末尾位置
document.getElementById('nav-container').insertAdjacentHTML('beforeend', z);

insertAdjacentHTML支持的位置参数：

• beforebegin：目标元素自身的前面
• afterbegin：目标元素内部的第一个子元素前
• beforeend：目标元素内部的最后一个子元素后
• afterend：目标元素自身的后面

方法3：创建临时DOM元素再插入（适合需二次处理的场景） #

如果需要对渲染后的元素做额外修改，可以先通过临时容器解析HTML，再把处理后的元素插入页面：

const z = 
    "<section class="vh-100" style="background-color: #5f59f7;">\n    <div class="container py-5 h-100">\n      <div class="row d-flex justify-content-center align-items-center h-100">\n        <div class="col col-xl-10">\n          <div class="card mb-5" style="border-radius: 15px;">\n            <div class="card-body p-4">\n              <h3 class="mb-3">Program Title</h3>";

const tempDiv = document.createElement('div');
tempDiv.innerHTML = z;
// 可以在这里对tempDiv内的元素做修改，比如修改样式、绑定事件等
// 然后将解析后的元素插入目标容器
document.getElementById('nav-container').appendChild(tempDiv.firstElementChild);

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