Question

I want to load an iframe using just javascript, so far I’ve been using this:

$(".punctis-social-box").html("<iframe></iframe>");

But since it is the only instruction I have that uses jQuery, I’ll like not to depend any more on jQuery.

Answer 1

Maybe not the best way to start:

var elements = document.getElementsByClassName("punctis-social-box");
for (var i = 0; i < elements.length; i++) {
    elements[i].innerHTML = "<iframe></iframe>";
}

Or using querySelectorAll:

var elements = document.querySelectorAll(".punctis-social-box");
for (var i = 0; i < elements.length; i++) {
    elements[i].innerHTML = "<iframe></iframe>";
}

In order to avoid all bad practices^TM you may use document.createElement instead of explicit change of inner HTML:

var element = document.querySelector(".punctis-social-box"),
    iframe = document.createElement("iframe");

while (element.firstChild) {                  // the fastest way
    element.removeChild(element.firstChild);  // to clear the contents
}
element.appendChild(iframe);                  // adding new <iframe>