Change random Elements in DOM (no jQuery)

user_10927464 0
Viewed 97

I am trying to write a js for any simple html side. The js should pick all img or p elements for example and swap the position of 2 random elements of the same type by clicking a button.

let max = document.getElementsByTagName("img").length;
let min = 0;
let x1 = Math.round((Math.random() * (max - min)) + min);
let x2 = Math.round((Math.random() * (max - min)) + min);
let tmp1 = document.getElementsByTagName("img")[x1];
let tmp2 = document.getElementsByTagName("img")[x2];

thats my first steps but i dont know how to go on. hope someone can help

css dom html javascript
1 Answers

You need to use insertBefore to do this.

let max = document.getElementsByTagName("div").length;
let min = 0;
let x1 = Math.round((Math.random() * (max - min)) + min);
let x2 = Math.round((Math.random() * (max - min)) + min);
let tmp1 = document.getElementsByTagName("div")[x1];
let tmp2 = document.getElementsByTagName("div")[x2];

// from here, do the changes
let wrapper = document.getElementById("wrapper"); // get wrapper reference
wrapper.insertBefore(tmp1, tmp2); // insert node before tmp1.
wrapper.insertBefore(tmp2, tmp1);
<div id="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</div>

Things to be noticed here,

  1. All the items you need to change position, should be under some node. Instead of directly having them under document I've created a wrapper node and added it.
  2. Just to make it bit easier for viewing, I've added the nodes as div not img. But code should work just the same.
  3. This is just to demonstrate insertBefore. For proper implementation, you need to check for nextSibling or previousSibling and do it with those nodes.
user_68084740
Related