First of all, before adding anything, you should always make sure that whatever content that you're adding doesn't violate the Terms of Use, or hides advertisements.
There are various ways to do it using JavaScript. The most obvious approach is to have a function that checks every few milliseconds if the right rail content has loaded, and then adds your section and stops running. For instance:
$(function() { if ($("#WikiaRail").length == 1) { var delay = 500, section = ( '<section class="module">' + '<h2>Heading</h2>' + 'Content goes here :)' + '</section>' ); // first make sure that the rail exists in the given page function checkRail() { if ($("#WikiaRecentActivity").length == 1) { // activity module has loaded $("#WikiaRecentActivity").after(section); } else if ($("#WikiaRail section").length == 0) { // nothing has loaded // if rail has loaded, but activity module doesn't appear in the given namespace's rail, do nothing setTimeout(checkRail, delay); } } checkRail(); } });
In the example above, the function checkRail
checks every delay
milliseconds if the activity module has loaded (the delay is set to 500ms in this example), and then inserts the new section (stored as section
) when it does load.
Another common way to check it is using the DOMNodeInserted JavaScript event, but it is depracated, and therefore should be avoided. If observerse are needed- for an instant effect, rather than having a delay- you should use MutationObserver instead. Here's an example for how you can use a MutationObserver:
$(function() { var section = ( '<section class="module">' + '<h2>Heading</h2>' + 'Content goes here :)' + '</section>' ), obs = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { Array.prototype.forEach.call(mutation.addedNodes, function(node) { console.info(node); if (node.nodeType == 1) { if (node.id == "WikiaRecentActivity") { obs.disconnect(); $(node).after(section); } } }); }); }); obs.observe(document.querySelector("#WikiaRail"), { childList: true }); });
Thanks a lot man!