在沒有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>"; 
} 

爲了避免所有陋習^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

方法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