DIV怎么能像Javascript中的另一个元素一样工作呢

How can a DIV act like another element in Javascript?

本文关键字：一样 工作 元素 怎么能 Javascript 另一个 DIV      更新时间：2023-09-26

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

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

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

请注意，具有"Writesomething"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如何像文本区域或输入一样工作？

谢谢！

如何使用JS在上面插入文本

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

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

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

DIV如何像文本区域或输入一样工作

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

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

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

element.textContent = "text content"

摘录1

var div = document.querySelector('div');
div.textContent = "line of text by textContent"
<div></div>

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

可以将contneteditable添加到最初不可编辑的图元中。

 <div contenteditable></div>

请参阅如何通过JS 设置contenteditable的代码段

摘录2

var editor = document.querySelector('div');
editor.setAttribute('contenteditable', true);
<div>This is a div. Click on me and start typing.</div>

相关文章：