Question

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

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

以下是一个示例：我从页面中提取此来源以在Facebook群组中发布主题。

请注意，有一个＆＃39;写东西＆＃39; innerhtml在页面中用作textarea。您可以在任何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';

但是＆＃39; textarea＆＃39;在上面的情况下，元素实际上是一个DIV，没有别的。

如何使用JS在其上插入文字？ DIV如何像textarea或输入一样？

谢谢！

Answer 1

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

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

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

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

DIV如何像textarea或输入一样？

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

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

Answer 2

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

element.textContent = "text content"

SNIPPET 1

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

<div></div>

DIV如何像textarea或输入一样？

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

 <div contenteditable></div>

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

SNIPPET 2

var editor = document.querySelector('div');

editor.setAttribute('contenteditable', true);

<div>This is a div. Click on me and start typing.</div>

DIV如何像Javascript中的另一个元素一样？

2 个答案:

SNIPPET 1

SNIPPET 2