javascript add text to multiple elements

Question

Is it possible to add text to multiple elements using javascript?

This is the original content.

<div class="container">I am Arun</div>
<div class="container">I am Arun</div>
<div class="container">I am Arun</div>

This is what happens when you add text using javascript.

<div class="container">Hello, I am Arun</div>
<div class="container">Hello, I am Arun</div>
<div class="container">Hello, I am Arun</div>

I tried searching for answers online and many people mentioned the following methods.

.createTextNode()
.insertAdjacentText()
.insertAdjacentHTML()
Node.textContent

But they cannot be applied to multiple elements, i.e. document.getElementsByClassName('container').

May I ask if my understanding is correct? Any help is appreciated in advance!

You can use @AbsoluteBeginner's answer and still use `var divs = document.getElementsByClassName('container')`. — iAmOren, Oct 11 '20 at 22:39

AbsoluteBeginner · Accepted Answer · 2020-10-11T12:04:42.407

Use document.querySelectorAll.

My suggestion:

var divs = document.querySelectorAll(".container");

for (var i = 0; i < divs.length; i++) {
  divs[i].innerHTML = "Hello, " + divs[i].innerHTML;
}

<div class="container">I am Arun</div>
<div class="container">I am Arun</div>
<div class="container">I am Arun</div>

score 1 · Answer 2 · answered Oct 11 '20 at 12:10

1

Using CSS Pseudo-element ::before

.container::before {
  content: 'Hello, '
}

<div class="container">I am Arun</div>
<div class="container">I am Arun</div>
<div class="container">I am Arun</div>

answered Oct 11 '20 at 12:10

User863

2 Answers2