如何使用JavaScript将URL参数值填充到HTML对应元素中

调整HTML结构 #

先给需要填充内容的节点加上对应id，方便JS定位，建议用行内元素span避免换行：

Your ID is: <span id="id"></span>
Your Name is: <span id="name"></span>

添加JavaScript代码 #

把以下代码放到页面的<script>标签里即可，兼容所有现代浏览器：

// 等待DOM结构加载完成后执行逻辑，避免节点找不到报错
document.addEventListener('DOMContentLoaded', () => {
  // 解析当前URL的查询参数
  const queryParams = new URLSearchParams(window.location.search);
  // 填充对应参数到节点，参数不存在时显示默认提示内容
  document.getElementById('id').textContent = queryParams.get('id') ?? '无有效ID';
  document.getElementById('name').textContent = queryParams.get('name') ?? '无有效姓名';
});

如果你的JS代码是放在<body>末尾的，也可以去掉外层的DOMContentLoaded监听，直接写参数解析和填充逻辑即可。

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