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/