Append data within a class using pure Javascript

Question

I want to append a text within a class using Javascript, not by using jQuery. Example:

<div class="A">
    <div class ="B">
        <div class="C">
        </div>
    </div>
<div>

After putting text within Class="B", it should look like:

<div class="A">
    <div class ="B">
         This is text
        <div class="C">
        </div>
    </div>
<div>

I want to do it without using jQuery.

With loads of examples on SO: http://stackoverflow.com/questions/3391576/how-can-i-implement-prepend-and-append-with-regular-javascript — Adrian Lynch, Feb 25 '16 at 14:48

Thomas Orlita · Accepted Answer · 2016-02-25T14:56:39.747

Using insertAdjacentHTML() method:

var elements = document.getElementsByClassName("B"); // get all elements with class 'B'
for (var i = 0; i < elements.length; i++) { // for every element with class 'B':
    elements[i].insertAdjacentHTML("afterbegin", "This is text");
    // insert text just inside the element
}

<div class="A">
    <div class="B"><!-- Text will be inserted here -->
        <div class="C">
        </div>
    </div>
<div>

score 0 · Answer 2 · answered Feb 25 '16 at 14:50

This will also do the trick:

function prependTextToClassB(){
        var textNode = document.createTextNode('This is text');
        var elB = document.querySelector('.B');
        var elC = document.querySelector('.C');
        elB.insertBefore(textNode, elC);
    }

Append data within a class using pure Javascript

2 Answers2