HTML 如何更改innerHTML 范围之外的元素

Question

我校的在线评委（一个代码解题和测试的网站）支持用户更改签名。它使用下面的 JavaScript 代码：

signature = "Student Signature"; // Random Signature
elem = document.createElement("div");
elem.innerHTML = signature;

学生可以更改签名。

问题是，我们喜欢旋转签名，所以我们在签名中写了

<i class="loading icon"> Signature

，使其旋转，甚至重叠其他内容（为了好玩）。然而，老师发现了，决定将上面includes元素（和代码）的分区样式（不是上面代码中创建的分区）更改为

<div style="overflow: hidden">

，这样就不会重叠。

问题：有没有办法改变签名，使其可以删除范围之外的分区样式，或者替代方案，使图标溢出？

附注最多不得超过 40 个字符。

我的尝试：我尝试将我的签名写成

</div><div><i class="loading icon"> my_signature

（网站最后会自动添加

</i></div>

），但没有成功。这是因为（我认为）网站希望我将内容放入in范围内，而不是end它。

Answer 1

您可以使用

position:absolute

来逃避正常的渲染流程。

例如：

let elem, signature;

signature = "<i style='position:absolute' class='loading icon'>Student Signature";
elem = document.createElement("div");
elem.innerHTML = signature;

document.querySelector("div").appendChild(elem);

#signature { overflow: hidden; width: 200px; height: 20px; border: 1px solid; }
.loading { animation: spinner 1.5s linear infinite; }
@keyframes spinner { to { transform: rotate(360deg); } }

Some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
<p>
Your signature: 
<div id="signature"></div>