使用JavaScript在文本区域中添加文本

Question

I have a text-area where I can write a message. I would like to input text in that text-area with JavaScript.

 <div tabindex="-1" class="_2bXVy">
<div tabindex="-1" class="_3F6QL _2WovP">
<div class="_39LWd" style="visibility: visible">Type a message</div><div class="_2S1VP copyable-text selectable-text" contenteditable="true" data-tab="1" dir="ltr" spellcheck="true">

JS code : http://jsfiddle.net/kex1pgLc/3/

Answer 1

Since <div contenteditable> is not a real <textarea> , you can't edit its value using div.value . Instead, you can edit it using div.textContent and its variants, like div.innerText and div.innerHTML .

If you want to use <div contenteditable> just like <textarea> , I would recommend you to choose <textarea> .

Answer 2

Use innerHTML instead of value .

Because in your code: document.getElementsByClassName("_39LWd")[0] returns div .

 document.getElementsByClassName("_39LWd")[0].innerHTML = "exemple text" 

 <footer tabindex="-1" class="_2jVLL"><div class="_3oju3"><div tabindex="-1" class="_2uQuX" data-tab="4"><button class="_2Fofa"><span data-icon="smiley" class=""><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path opacity=".45" fill="#263238" d="M9.153 11.603c.795 0 1.439-.879 1.439-1.962s-.644-1.962-1.439-1.962-1.439.879-1.439 1.962.644 1.962 1.439 1.962zm-3.204 1.362c-.026-.307-.131 5.218 6.063 5.551 6.066-.25 6.066-5.551 6.066-5.551-6.078 1.416-12.129 0-12.129 0zm11.363 1.108s-.669 1.959-5.051 1.959c-3.505 0-5.388-1.164-5.607-1.959 0 0 5.912 1.055 10.658 0zM11.804 1.011C5.609 1.011.978 6.033.978 12.228s4.826 10.761 11.021 10.761S23.02 18.423 23.02 12.228c.001-6.195-5.021-11.217-11.216-11.217zM12 21.354c-5.273 0-9.381-3.886-9.381-9.159s3.942-9.548 9.215-9.548 9.548 4.275 9.548 9.548c-.001 5.272-4.109 9.159-9.382 9.159zm3.108-9.751c.795 0 1.439-.879 1.439-1.962s-.644-1.962-1.439-1.962-1.439.879-1.439 1.962.644 1.962 1.439 1.962z"></path></svg></span></button></div><div tabindex="-1" class="_2bXVy"><div tabindex="-1" class="_3F6QL _2WovP"><div class="_39LWd" style="visibility: visible">Type a message</div><div class="_2S1VP copyable-text selectable-text" contenteditable="true" data-tab="1" dir="ltr" spellcheck="true"></div></div></div><div class="_1UWg0"><span><button class="_2SbJ1"><span data-icon="ptt" class=""><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#263238" fill-opacity=".45" d="M11.999 14.942c2.001 0 3.531-1.53 3.531-3.531V4.35c0-2.001-1.53-3.531-3.531-3.531S8.469 2.35 8.469 4.35v7.061c0 2.001 1.53 3.531 3.53 3.531zm6.238-3.53c0 3.-2.942 6.002-6.237 6.002s-6.237-2.471-6.237-6.002H3.761c0 4.001 3.178 7.297 7.061 7.885v3.884h2.354v-3.884c3.884-.588 7.061-3.884 7.061-7.885h-2z"></path></svg></span></button></span></div></div><div class="_14wwJ"><div class="_1fkhx"><div></div></div></div><span class="_245vA"></span><span class="TSSFW"></span></footer> 

EDIT======

If it is the case for the textarea specific then you should use textarea instead of div .

 document.getElementById("abc").value = "Hi" 

 <textarea id="abc" placeholder="type message"> </textarea> 

Second EDIT==========

Create dynamic textarea

 var textArea = document.createElement("textarea"); var parentDiv = document.getElementsByClassName("abc")[0]; parentDiv.appendChild(textArea); textArea.placeholder = "Type message"; textArea.value = "Hello"; 

 <div class="abc"></div>