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

Question

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

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

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

请注意，具有“Write something”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 如何充当文本区域或输入？

谢谢!

Answer 1

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

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

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

但是，您可以仅使用 CSS 来执行相同的操作，然后从调用相同属性的 div 中检索文本。

DIV 如何充当文本区域或输入框？

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

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