如何用JS动态创建和修改HTML路由视图_JS动态创建和修改HTML路由视图教程

// 定义路由映射
const routes = {
  '#/': '<h1>首页</h1><p>欢迎来到主页</p>',
  '#/about': '<h1>关于我们</h1><p>我们是一家前端技术团队</p>',
  '#/contact': '<h1>联系我们</h1><form><input placeholder="你的名字"/><button>提交</button></form>'
};
<p>// 获取容器
const app = document.getElementById('app');</p><p>// 路由处理函数
function renderView() {
const path = window.location.hash || '#/';
const content = routes[path] || '<h1>404</h1><p>页面未找到</p>';
app.innerHTML = content;
}</p><p>// 监听 hash 变化
window.addEventListener('hashchange', renderView);</p><p>// 初始化视图
renderView();</p>

function createContactView() {
  const container = document.createElement('div');
  container.innerHTML = '<h1>联系我们</h1>';
<p>const form = document.createElement('form');
const input = document.createElement('input');
input.type = 'text';
input.placeholder = '请输入姓名';</p><p>const button = document.createElement('button');
button.textContent = '提交';
button.onclick = (e) => {
e.preventDefault();
alert('感谢您的留言！');
};</p><p>form.appendChild(input);
form.appendChild(button);
container.appendChild(form);</p><p>return container;
}</p><p>// 在路由中调用
if (path === '#/contact') {
app.innerHTML = '';
app.appendChild(createContactView());
}</p>

function handleDynamicRoute() {
  const hash = window.location.hash;
  const match = hash.match(/#\/user\/(\d+)/);
  if (match) {
    const userId = match[1];
    app.innerHTML = `<h1>用户详情</h1><p>当前查看用户 ID：${userId}</p>`;
  }
}