如何将元素附加到正文？

Question

我目前使用以下代码将 div 附加到正文：

$("body").append('<div class="tooltip" id="op" style="position: absolute; z-index: 999; height: 16px; width: 16px; top:70px"><span>Test</span></div>');

我怎么能像上面一样做但不使用jQuery？

Answer 1

在纯 Javascript 中，它会更冗长一点：

var div = document.createElement('div');
div.className = 'tooltip';
div.id = 'op';
div.style.cssText = 'position: absolute; z-index: 999; height: 16px; width: 16px; top:70px';
div.innerHTML = '<span>Test</span>';

document.body.appendChild(div);

Answer 2

我真的很喜欢所有现代浏览器的 insertAdjacentHTML 方法——而且也支持旧版浏览器。

参考：http://updates.html5rocks.com/2011/08/insertAdjacentHTML-Everywhere

用法：

var html = '<div class="tooltip" id="op" style="position: absolute; z-index: 999; height: 16px; width: 16px; top:70px"><span>Test</span></div>';
document.body.insertAdjacentHTML('beforeend', html);