Element.insertAdjacentHTML与:: before和:: after引导程序类不兼容

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>");

引导程序无论在哪里插入:: before和:: after类，HTML都不是预期的方式。请帮我解决一下这个。

谢谢。

Answer 1

在此示例中，即使将'glyphicons-ok'类应用于按钮，它也将应用于其旁边的div。

那是因为您要插入的HTML 无效：

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

i不能在HTML中自动关闭。一旦你写的是正确的，<i …></i>，它按预期工作：http://jsfiddle.net/wuqyfm5h/5/