DOM

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

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

Blue 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.

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

All values are in pixels.

screen snapshot with extended page illustration

Simulateur

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

<ul id="tree">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

Array.from(tree.querySelectorAll('li'),
( li ) => {
let span = document.createElement('span');
li.prepend(span);
span.append(span.nextSibling);
}
)

Le code précédent transforme chaque élément de la liste comme suit :

<ul class="tree" id="tree">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>