DIV如何充当Javascript中的另一个元素？

Question

我在Java语言方面的技能是有限的，为了练习，我尝试使用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/

Answer 2

如何使用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>