jquery - 创建一个 div 并通过 Greasemonkey 和 jQuery 将其添加到页面

Question

我刚开始使用 Greasemonkey 和 jQuery，当单击图像时，我需要向当前页面添加一个设置面板。

有人能给我一个如何通过 jQuery 创建 div 的示例，然后将其添加到当前页面，绝对定位在其他元素之上吗？

这是我正在使用的一些测试代码，对所涉及的方法有些盲目。

var settingsDiv = '<div style="position:absolute;bottom:0;width:500px;padding:0;" id="kwdHelpInfo">This is the div that I want to add to the page</div>';

//the #kwdHelp element is an image file already in the document. When its clicked, I want to show the settingsDiv...

jQuery('#kwdHelp').live('click',function(){
    //alert('clicked show help');
    //var newcell = jQuery(settingsDiv);
    //jQuery(newcell).show();
});

Answer 1

你已经很接近了，但还没有完全实现。使用 jQuery 的 append() 方法将新元素添加到包含元素的底部...

$('#kwdHelp').click(function() {
    $('#outerElement').append(settingsDiv); // this very well could be $('body') or any element you choose
});

...调整您的样式，使其适合元素所在的位置。