如何在HTML中点击按钮将段落文本替换为两个输入框内容？

没问题，这个需求很容易实现，用基础的 HTML 和 JavaScript 就能搞定，我给你写个完整的可运行示例：

1. HTML 结构 #

先搭建页面的基础元素：两个输入框、触发按钮，以及用来展示结果的段落：

<!-- 输入区域 -->
<input type="text" id="input1" placeholder="请输入第一个内容">
<input type="text" id="input2" placeholder="请输入第二个内容">
<button id="mergeButton">生成文本</button>

<!-- 结果展示区域 -->
<p id="resultText"></p>

2. JavaScript 逻辑 #

接下来写核心的交互逻辑，给按钮绑定点击事件，获取输入值并拼接成你要的格式：

// 获取页面上的元素
const inputFirst = document.getElementById('input1');
const inputSecond = document.getElementById('input2');
const mergeBtn = document.getElementById('mergeButton');
const resultPara = document.getElementById('resultText');

// 给按钮添加点击监听
mergeBtn.addEventListener('click', () => {
  // 获取输入框的值，用trim()去除前后多余空格（可选）
  const content1 = inputFirst.value.trim();
  const content2 = inputSecond.value.trim();

  // 可选：处理输入为空的情况，提示用户
  if (!content1 || !content2) {
    resultPara.textContent = '请把两个输入框都填满哦！';
    return;
  }

  // 拼接成目标格式：「第一个内容™★第二个内容©」
  const finalText = `「${content1}™★${content2}©」`;

  // 更新段落的文本内容
  resultPara.textContent = finalText;
});

小说明 #

• 用 textContent 而不是 innerHTML 是为了安全，避免用户输入的内容里包含 HTML 代码导致意外渲染；
• 如果不需要处理空输入的情况，可以把那段判断删掉，直接拼接即可；
• 特殊符号 ™、★、© 都是可以直接在字符串中使用的，浏览器能正常识别显示。

你把这段代码复制到一个 HTML 文件里，直接在浏览器打开就能测试效果啦！

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