high level function

   function elt(name, attrs, ...children) {

     let dom = document.createElement(name);

     for (let attr of Object.keys(attrs)) {

       dom.setAttribute(attr, attrs[attr]);

     }

     for (let child of children) {

       dom.appendChild(child);

     }

     return dom;

   }

let text = document.createTextNode("topc");

let u = elt("p",{},...[text]);

document.querySelector(".test").appendChild(u);

const tab = ["lun","mard","mercredi"];

let v = elt("div",{},...tab.map( (jour)=> {

  let p = elt("p",{class:"red"})

  p.innerHTML = jour;

  return p;

} ));

document.querySelector(".map").appendChild(v);

En action

à comparer avec

Différence entre screenX, clientX, pageX

 Screen → the full screen of the monitor (screenX/Y)
Position will always be relative to the physical screen's viewport.

 Client → the client viewport of the browser (clientX/Y)
If you click in the left top corner the value will always be (0,0) independent on scroll position.

 Document → the complete document/page (pageX/Y)
Note that pageX/pageY on the UIEvent object are not standardized.

All values are in pixels.

Simulateur

https://jsbin.com/dilumuz/3/edit?html,css,js,console,output