Question

我想通过使用纯javascript函数将一些html字符串附加到父元素。我正在使用bootstrap.css并将html附加到父级我已经编写了以下函数：

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

请检查jsFiddle。在这个例子中，即使＆＃39; glyphicons-ok＆＃39; class应用于button，它也适用于它旁边的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在类之前插入:: ::和之后，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/

Element.insertAdjacentHTML与:: before和:: bootstrap类不兼容

1 个答案: