javascript - Element.insertAdjacentHTML 与::before 和::after 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>");

无论 bootstrap 在何处插入::before 和::after 类，HTML 都不是它预期的样子。请帮我解决这个问题。

谢谢。

Answer 1

In this example, even if 'glyphicons-ok' class is applied to button, it is also applied to div next to it.

那是因为您尝试插入的 HTML 无效:

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

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