如何将元素附加到正文？答案

【问题标题】：How to append element to body?如何将元素附加到正文？
【发布时间】：2014-09-25 16:12:13
【问题描述】：

我目前正在使用以下代码将 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，我怎么能像上面那样做？

【问题讨论】：

Adding div element to body or document in javascript 的可能重复项

标签： javascript

【解决方案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);

【讨论】：

【解决方案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);

【讨论】：

多田！！ insertAdjacentHTML 可能是最被低估和鲜为人知的方法之一！现在这就是答案！

【解决方案3】：

你可以用 DOM 做很多事情！你可以这样操作简单的html！

查看 W3 网站： http://www.w3schools.com/js/js_htmldom.asp

【讨论】：

【解决方案4】：

更简单的方法是

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

在此处了解 insertAdjacentElement - https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement

【讨论】：