How can a DIV act like another element in Javascript?

Question

My skills in Javascript are limited and for practicing i'm trying to programatically fill some elements using JS code, using Chrome's Developer Tools. I navigate to a site, access the console and try to manipulate DOM elements using JS code.

Usually elements a user can input data are INPUT, TEXTAREA , SELECT and so on. But latelly i've been seeing elements that are user-editable, but are simply DIVs. In other words, a DIV acting like an INPUT or TEXTAREA, and this got me confused.

Here is an example : i extracted this source from a page to post topics in a Facebook Group.

Note that the div that has the 'Write something' innerhtml works as a textarea in the page. You can reproduce this code in any Facebook Group, ie https://www.facebook.com/groups/914737511952904/ (you might need to join the group before see the box to post a topic).

<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>

If this element was a TEXTAREA, i could easily do something like

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

But the 'textarea' element in the above case is actually a DIV and nothing else.

How can i insert text on it using JS ? An how can a DIV act like a textarea or an input ?

Thanks !

Answer 1

How can I insert text on it using JS?

That's quite simple. Just use the innerHTML property to assign the text value.

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

However you can do the same using just CSS, and then retrieving the text from the div invoking the same property.

How can a DIV act like a textarea or an input?

A very practical way is using the contentEditable property over the div, but you can use CSS styles as well, and in some cases with some JavaScript code.

You have a simple example here using CSS styles and contentEditable property: https://jsfiddle.net/ThinkingStiff/AbKTQ/

Answer 2

How can I insert text on it using JS?

element.textContent = "text content"

SNIPPET 1

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

 <div></div> 

An how can a DIV act like a textarea or an input?

You can add contneteditable to an element that's not originally editable.

 <div contenteditable></div>

See Snippet on how to set contenteditable by JS

SNIPPET 2

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

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