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

我不熟悉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();
});

var settingsDiv='这是我要添加到页面中的div'；
//#kwdHelp元素是文档中已经存在的图像文件。单击后，我想显示设置IV。。。
jQuery（'#kwdHelp'）.live（'click'，function（））{
//警报（“单击显示帮助”）；
//var newcell=jQuery（setingsdiv）；
//jQuery（newcell.show（）；
});

你很接近了，但还不太接近。使用jQuery的

append（）

方法将新元素添加到包含元素的底部

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

---

。。。在元素所在的位置上调整样式，

也可以考虑如下：

// Create, Append, and Save jQuery object for later reference
// Using appendTo is similar to append in functionality, but it returns the object appended
// Create once; toggle later
var jQ_helpInfo = jQuery("<div id='kwdHelpInfo'> ... </div>").appendTo("body");

// ...potentially add styles here...

// Add the click live event to "show"
jQuery("#kwdHelp").live("click", function() { jQ_helpInfo.show(); });

// Later you can have another event "hide"
jQuery(/* some other element or selector */).live("click", function() { jQ_helpInfo.hide(); });

这当然不是一个规则，但我添加了这个额外的建议，因为您提到了jQuery和Greasemonkey的新手。从良好的组织习惯开始总是很好的

// Define styles
var helpInfo_CSS = {
      "position": "absolute",
      "bottom": 0,
      "width": "500px",
      "padding": 0
    };

// Now apply the styles
jQ_helpInfo.css(helpInfo_CSS);