如何將元素追加到正文？

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

你可以用DOM做很多事情！你可以這樣操縱簡單的html！

退房的W3網站： http://www.w3schools.com/js/js_htmldom.asp

Answer 3

我真的很喜歡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);