javascript - 在没有jQuery的情况下在div上加载html？

Question

我想加载一个iframe只使用javascript的，到目前为止我一直在使用这个：

$(".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>";
}

为了避免所有不良做法^TM，您可以使用document.createElement而不是显式更改内部 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>

Answer 2

方法一：

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