Cannot manage to change the inner html of a div element

Question

I cannot manage to change the inner html of a div element

<div class="emoji-wysiwyg-editor form-control" data-id="83fa07d0-2bab-4c02-8bb6-a2133ae64bbd"
data-type="input" placeholder="Chat Message" contenteditable="true" id="chatMessageSurrogate"
data-toggle="tooltip" data-placement="top" data-title="Please input a message within 300 
characters." autocomplete="off" style="height: 63px;">wafwafgz</div>

I've tried the following:

$(".emoji-wysiwyg-editor.form-control").val("Hello!")
document.getElementsByClassName(".emoji-wysiwyg-editor.form-control").innerHTML = "Hello!"

but none of them is working

Furthermore, `getElementsByClassName` expects a class name (not a class selector) and returns a collection (not a single element). — Conrad, Jun 17 '16 at 12:00

ADyson · Accepted Answer · 2016-06-17T12:02:15.113

3

$(".emoji-wysiwyg-editor.form-control").html("Hello!"); should work

edited Jun 17 '16 at 12:02

answered Jun 17 '16 at 12:00

ADyson

51,527
13
48
61

Works great, you just forgot to add a dot before form-control, thanks for that – Recuvan Jun 17 '16 at 12:01

score 1 · Answer 2 · answered Jun 17 '16 at 12:02

1

as stated previously .html("hello") should work, but also, getElementsByClassName i believe only works on a single class name and returns and array, so the below should also work

$(".emoji-wysiwyg-editor.form-control").html("Hello!");
// or
document.getElementsByClassName("emoji-wysiwyg-editor")[0].innerHTML = "Hello!"

answered Jun 17 '16 at 12:02

Scriptable

18,734
5
56
68

2

What it returns isn't an array, but it is array-like. It's an [`HTMLCollection`](https://dom.spec.whatwg.org/#dom-document-getelementsbyclassname). – T.J. Crowder Jun 17 '16 at 12:05
`getElementsByClassName()` accepts a space-separated list of class names. – nnnnnn Jun 17 '16 at 12:24

score 1 · Answer 3 · answered Jun 17 '16 at 12:03

1

In your HTML code there are two different class "emoji-wysiwyg-editor" and "form-control". So you have to use any of one.

$(".emoji-wysiwyg-editor").html("Hello!");

$(".emoji-wysiwyg-editor .form-control").html("Hello!");

And you want to add html contents in DIV so you have to use html. val is use for input typt.

answered Jun 17 '16 at 12:03

Krishna

853
1
10
24

This is incorrect. The second selector in your answer will *not* select the element in question, because it is looking for elements with class `form-control` that are descendants of elements with class `emoji-wysiwyg-editor`. There's nothing wrong with the OP's selector (when used with jQuery): `".emoji-wysiwyg-editor.form-control"` selects elements with both classes. – nnnnnn Jun 17 '16 at 12:09

score 1 · Answer 4 · answered Jun 17 '16 at 12:06

1

in pure JavaScript with the use of multiple class.

document.getElementsByClassName("emoji-wysiwyg-editor form-control")[0].innerHTML = "hello";

answered Jun 17 '16 at 12:06

Deep

9,344
2
17
31

score 1 · Answer 5 · answered Jun 17 '16 at 12:06

1

Using JS,

var a = document.querySelector('.emoji-wysiwyg-editor');
a.innerHTML = "Hello";

answered Jun 17 '16 at 12:06

frnt

8,199
2
19
23

Cannot manage to change the inner html of a div element

5 Answers5

Linked