Element.insertAdjacentHTML與:: before和:: bootstrap類不兼容

Question

我想通過使用純javascript函數將一些html字符串附加到父元素。我使用bootstrap.css和HTML附加於母公司的我已經寫了以下功能：

function appendMarkUp() {  
    (typeof markup == "string") ? parentEle.insertAdjacentHTML("afterbegin", markup) 
           : parentEle.insertBefore(markup, parentEle.firstChild); 
    return parentEle; 
} 

請檢查該jsFiddle。 在這個例子中，即使「glyphicons-OK」類用於按鈕，它也適用旁邊div來它：

var parent = document.getElementById('wrapper'); 
parent.insertAdjacentHTML('afterbegin', "<button class='btn btn-answer btn-primary'><i class='glyphicon glyphicon-ok'/>Answer</button><div>Next msg...</div>"); 

只要引導插入::之前和::班後，HTML是不它打算成爲的方式。 請幫我這個。

謝謝。

Answer 1

在這個例子中，即使「glyphicons-OK」類被施加到按鈕時，它也被施加在它旁邊來覈實。

嗯，這是因爲你的HTML您嘗試插入是無效：

<button class='btn btn-answer btn-primary'><i class='glyphicon glyphicon-ok'/>Answer</… 

i不能自閉在HTML中。一旦你寫正確,<i …></i>，它按預期工作：http://jsfiddle.net/wuqyfm5h/5/