新手求助：如何让addHeading()根据下拉框和表单生成对应层级标题元素？

嘿，作为编程新手遇到这种问题太正常啦，我来帮你把这个函数改造成能生成对应级别标题的版本～

问题根源 #

你当前的代码应该只是直接输出了文本，但没有根据下拉框选择的标题类型（h1-h6）去创建对应的HTML标题元素，所以字号不会变化。咱们需要做的就是获取标题类型→创建对应标签→填充文本→添加到页面这几步。

完整解决方案（含HTML和JS） #

首先假设你的HTML结构是这样的（如果和你的实际结构有出入，调整id即可）：

<!-- 下拉框选择标题类型 -->
<select id="heading">
  <option value="h1">一级标题</option>
  <option value="h2">二级标题</option>
  <option value="h3">三级标题</option>
  <option value="h4">四级标题</option>
  <option value="h5">五级标题</option>
  <option value="h6">六级标题</option>
</select>

<!-- 输入标题文本的表单 -->
<input type="text" id="headingText" placeholder="请输入标题内容">

<!-- 触发函数的按钮 -->
<button onclick="addHeading()">生成标题</button>

<!-- 用来展示生成的标题的容器 -->
<div id="outputArea"></div>

然后是修正后的addHeading()函数：

function addHeading() {
  // 1. 从下拉框获取选中的标题类型（h1/h2/.../h6）
  const selectedHeadingType = document.getElementById("heading").value;
  
  // 2. 从表单获取输入的标题文本
  const headingContent = document.getElementById("headingText").value;
  
  // 小细节：先检查用户有没有输入内容，避免生成空标题
  if (!headingContent.trim()) {
    alert("请先输入标题内容哦！");
    return; // 没有内容就停止执行函数
  }
  
  // 3. 创建对应的标题元素
  const newHeading = document.createElement(selectedHeadingType);
  
  // 4. 给标题元素填充文本内容（用textContent更安全，避免XSS风险）
  newHeading.textContent = headingContent;
  
  // 5. 把生成好的标题添加到页面的展示容器里
  const outputArea = document.getElementById("outputArea");
  outputArea.appendChild(newHeading);
  
  // 可选优化：清空输入框，方便下次输入
  document.getElementById("headingText").value = "";
}

关键步骤解释 #

• 获取标题类型：下拉框的value属性就是我们设置的h1到h6，直接拿这个值就能知道要创建哪种标题标签。
• 创建元素：document.createElement()方法可以根据传入的标签名（比如"h1"）生成对应的HTML元素，浏览器会自动应用该标签默认的字号样式。
• 安全填充文本：用textContent而不是innerHTML，可以防止用户输入恶意代码，更安全。
• 添加到页面：必须把创建好的元素添加到DOM树里，它才会显示在页面上，这里我们选择添加到指定的输出容器中。

这样修改后，你的函数就能根据下拉框选择的类型生成对应字号的标题啦～

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