Help:Adding JS to your Wiki

In this example, the example template is JSExample.

Setup
Create the page template:JSExample Create the page MediaWiki:JSExample.js In the page MediaWiki:Common.js, paste the following code: importScript('MediaWiki:JSExample.js');

Template
Put the following code in the template:

JavaScript
In MediaWiki:JSExample.js, put the following code: $(function {    let template = document.getElementById('JSExample');	if(template == undefined) return;    let packer = document.createElement("div")    // put your html here    template.appendChild(packer); }); You cannot input your HTML as raw HTML, so you will need to build your HTML with JavaScript.

Result
So the following code: $(function {    let template = document.getElementById('JSExample');	if(template == undefined) return;

let greeting = document.createElement("div"); let input = document.createElement("textarea"); let repeater = document.createElement("div"); let button = document.createElement("button");

button.innerHTML = "Click me!"; input.oninput = e => { repeater.innerHTML = input.value }

button.onclick = e => { alert(repeater.innerHTML); }

greeting.innerHTML = "Hello!" greeting.style.fontSize = "20px";

let packer = document.createElement("div"); packer.appendChild(greeting); packer.appendChild(input); packer.appendChild(repeater); packer.appendChild(button);

template.appendChild(packer); });

Produces this output: