javascript - jQueryなしでdivにhtmlをロードしていますか?

Question

JavaScriptだけを使用してロードしたいiframeので、これまで使用してきました：

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

しかし、これが jQuery を使用する唯一の命令であるため、jQuery にこれ以上依存したくありません。

Answer 1

開始するのに最適な方法ではないかもしれません：

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

または使用querySelectorAll：

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

内部 HTML の明示的な変更の代わりに使用できるすべての悪い慣行^TMを回避するために:document.createElement

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>

Answer 2

方法 1:

var social_boxes = document.getElementsByClassName('punctis-social-box');
social_boxes[0].innerHTML += '<iframe></iframe>'; // add to first element, loop thru "social_boxes" if you want to add iframe to all elements

方法 2 (より良い):

var social_boxes = document.getElementsByClassName('punctis-social-box');
var iframe = document.createElement('iframe');
social_boxes[0].appendChild(iframe); // add to first element, loop thru "social_boxes" if you want to add iframe to all elements