更改DOM中的随机元素（无jQuery）

Question

我正在尝试为任何简单的html端编写一个js。 js应该选择所有img或p元素，然后通过单击按钮交换2个相同类型的随机元素的位置。

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];

那是我的第一步，但我不知道如何继续。希望有人可以帮助

Answer 1

您需要使用insertBefore来完成此操作。

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>

这里要注意的事情，

1. 所有需要更改位置的项目都应在某个节点下。我没有将它们直接放在document下，而是创建了一个包装器节点并将其添加。
2. 只是为了使其易于查看，我将节点添加为div而不是img。但是代码应该可以正常工作。
3. 这只是为了演示insertBefore。为了正确实施，您需要检查nextSibling或previousSibling并使用这些节点进行检查。