如何使用JavaScript将div内容添加至input输入框中

实现步骤与代码 #

先给原DOM元素添加唯一ID以精准定位，再给按钮绑定点击事件，触发时将div的文本内容赋值给input的value属性。

完整代码如下：

<div id="targetDiv">This is text</div>
<input type="text" name="test" id="inputs">
<button id="copyBtn">Go</button>

<script>
// 获取目标DOM元素
const targetDiv = document.getElementById('targetDiv');
const inputBox = document.getElementById('inputs');
const copyBtn = document.getElementById('copyBtn');

// 绑定点击事件处理逻辑
copyBtn.addEventListener('click', function() {
    // 将div的文本内容赋值给input，trim()去除首尾多余空格
    inputBox.value = targetDiv.textContent.trim();
});
</script>

补充说明 #

• 给div和按钮添加ID是为了避免元素获取歧义，确保操作对象准确
• 使用textContent获取纯文本内容，兼容性更强；若需保留HTML格式可改用innerHTML，但本场景纯文本更适配
• 事件监听写法比直接在标签上写onclick更利于代码维护，也支持绑定多个事件

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