How can I set an html node's innerText and innerHtml without using jQuery?

Question

In javaScript, how can I set an html nodes inner text and inner html without using jQuery?

Here is what I have tried:

function setInnerText(className, data) {
    document.getElementsByClassName(className).innerText(data);
}

function setInnerHTML(className, data) {
    document.getElementsByClassName(className).innerHTML(data);
}

May I please have some help with this?

Thanks.

Answer 1

getElementsByClassName returns a collection of elements. To set the innerText of first element, use

document.getElementsByClassName(className)[0].innerText(data);

You can also use querySelector

document.querySelector('.' + className).innerText = data;

To set the innerText of all the elements,

var elements = document.getElementsByClassName(className);
// var elements = document.querySelectorAll('.' + className);

for (var i = 0, len = elements.length; i < len; i++) {
    elements[i].innerText = data;
}