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中，它会更加冗长：

＆＃13;

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

＆＃13;

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

Answer 3

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

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

Answer 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

如何将元素附加到身体？

4 个答案: