Firefox:Dive Into Greasemonkey/4.11. Inserting complex HTML quickly

Mozilla中文Wiki

您的位置：Dive Into Greasemonkey → 公用模式 → 快速插入 HTML

4.11. 快速插入 HTML

innerHTML 属性允许您将 HTML 语句以字符串的形式表示，并将它们直接插入到页面中。这样您就不需要为每一个 HTML 元素创建单独的 DOM 对象，然后再一个一个的设置它们的属性。

var logo = document.createElement("div");
logo.innerHTML = '<div style="margin: 0 auto 0 auto; ' +
    'border-bottom: 1px solid #000000; margin-bottom: 5px; ' +
    'font-size: small; background-color: #000000; ' +
    'color: #ffffff;"><p style="margin: 2px 0 1px 0;"> ' +
    'YOUR TEXT HERE ' +
    '</p></div>';
document.body.insertBefore(logo, document.body.firstChild);

在这里，关键的部分是第二行，我将 logo.innerHTML 的值设置成字符串的形式。 Firefox 将这个字符串解析成 HTML 语句， 创建所有的对象, 就像它重新加载一个页面一样。 这样我就可以将这个新标志插入到任何地方——页面顶部，页面底部，或者我选定的某个元素之前或之后。总之，页面上的任何位置都可以。

实例

• Access (http://diveintogreasemonkey.org/download/accessbar.user.js)
• Butler (http://diveintomark.org/projects/butler/butler.user.js)
• BetterDir (http://diveintogreasemonkey.org/download/betterdir.user.js)