如何仅用原生JavaScript实现点击按钮切换Div与Textarea？

需求：点击按钮时将Div转为Textarea以编辑其中内容，再次点击按钮则将Textarea转回Div并保留编辑后的内容。

完整实现代码 #

HTML

<button class="button">click me</button>
<div class="div">this is div or textarea</div>

JavaScript

const button = document.querySelector('button');
let targetElement = document.querySelector('div');
let isTextarea = false;

button.addEventListener('click', () => {
  if (isTextarea) {
    // 从Textarea转回Div
    const newDiv = document.createElement('div');
    newDiv.className = 'div';
    newDiv.textContent = targetElement.value;
    targetElement.parentNode.replaceChild(newDiv, targetElement);
    targetElement = newDiv;
    isTextarea = false;
  } else {
    // 从Div转为Textarea
    const newTextarea = document.createElement('textarea');
    newTextarea.className = 'div';
    newTextarea.value = targetElement.textContent;
    targetElement.parentNode.replaceChild(newTextarea, targetElement);
    targetElement = newTextarea;
    isTextarea = true;
  }
});

代码说明 #

• 用targetElement跟踪当前显示的元素（Div或Textarea），避免重复查询DOM
• 使用textContent传递内容，比innerHTML更安全，能避免潜在的注入风险
• 保留原元素的类名，确保切换前后样式一致
• 状态变量isTextarea控制切换逻辑，点击按钮时根据当前状态执行对应的节点替换操作

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