DIV 如何像 Javascript 中的另一个元素一样工作？答案

【问题标题】：How can a DIV act like another element in Javascript?DIV 如何像 Javascript 中的另一个元素一样工作？
【发布时间】：2016-09-07 14:59:10
【问题描述】：

我的 Javascript 技能有限，为了练习，我正在尝试使用 JS 代码，使用 Chrome 的开发人员工具以编程方式填充一些元素。我导航到一个站点，访问控制台并尝试使用 JS 代码操作 DOM 元素。

通常用户可以输入数据的元素是 INPUT、TEXTAREA、SELECT 等。但最近我一直看到用户可编辑的元素，但只是 DIV。换句话说，DIV 的作用类似于 INPUT 或 TEXTAREA，这让我感到困惑。

这里是一个例子：我从一个页面中提取了这个来源，以便在 Facebook 群组中发布主题。

请注意，具有“写一些东西”innerhtml 的 div 用作页面中的文本区域。您可以在任何 Facebook 群组中复制此代码，即https://www.facebook.com/groups/914737511952904/（您可能需要先加入群组，然后才能查看框以发布主题）。

<div class="_1mwp _1mwq _5bu_ _5yk1"><div class="_5yk2" tabindex="-2">
 <div class="_5rp7">
   <div class="_1p1t">
    <div class="_1p1v" id="placeholder-   2bc29">Write something... </div>
   </div>
 </div>
</div>

如果这个元素是 TEXTAREA，我可以轻松地做类似的事情

 document.getElementById('elementId').value = 'New text';

但上述案例中的“textarea”元素实际上是一个 DIV，仅此而已。

如何使用 JS 在其上插入文本？ DIV 如何像文本区域或输入一样起作用？

谢谢！

【问题讨论】：

标签： javascript html google-chrome-devtools

【解决方案1】：

如何使用 JS 在其上插入文字？

这很简单。只需使用innerHTML 属性来分配文本值。

document.getElementById('elementId').innerHTML = "Text inserted"

不过，您也可以只使用 CSS，然后从调用相同属性的 div 中检索文本。

DIV 如何像文本区域或输入一样发挥作用？

一种非常实用的方法是在 div 上使用 contentEditable 属性，但您也可以使用 CSS 样式，在某些情况下还可以使用一些 JavaScript 代码。

这里有一个使用 CSS 样式和 contentEditable 属性的简单示例： https://jsfiddle.net/ThinkingStiff/AbKTQ/

【讨论】：

谢谢，我不知道 DIV 可以是用户可编辑的：D

【解决方案2】：

如何使用 JS 在其上插入文本？

element.textContent = "text content"

片段 1

var div = document.querySelector('div');

div.textContent = "line of text by textContent"

&lt;div&gt;&lt;/div&gt;

DIV 如何像文本区域或输入一样起作用？

您可以将contneteditable 添加到原本不可编辑的元素。

 <div contenteditable></div>

查看片段了解如何通过 JS 设置 contenteditable

片段 2

var editor = document.querySelector('div');

editor.setAttribute('contenteditable', true);

&lt;div&gt;This is a div. Click on me and start typing.&lt;/div&gt;

【讨论】：