如何通过Submit按钮将一个blockquote的内容复制到另一个blockquote？

需求：点击页面中的Submit按钮，将id为“1”的可编辑（contenteditable="true"）blockquote元素里的内容，复制到id为“2”的同状态blockquote元素中，用JavaScript实现。

完整代码示例 #

<blockquote contenteditable="true" id="1"><p></p></blockquote>
<blockquote contenteditable="true" id="2"><p></p></blockquote>
<button type="button" id="submitBtn">Submit</button>

<script>
// 获取按钮和两个blockquote元素
const submitBtn = document.getElementById('submitBtn');
const sourceBlock = document.getElementById('1');
const targetBlock = document.getElementById('2');

// 绑定点击事件处理逻辑
submitBtn.addEventListener('click', function() {
    // 复制源元素的HTML内容到目标元素，保留格式
    targetBlock.innerHTML = sourceBlock.innerHTML;
});
</script>

关键说明 #

• 给按钮添加id="submitBtn"，方便JavaScript精准定位元素
• 将按钮type改为button，避免触发默认表单提交行为
• 使用innerHTML复制内容可保留源blockquote中的格式（如段落、换行），若只需纯文本可替换为textContent

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