<script type="text/javascript">
$(document).ready(function(){
$(window).resize(function() {
if($(window).width() < 767){
$("#second").insertBefore("#first"); }
else{
$("#first").insertBefore("#second"); }
});
});
</script>
我想更改html元素。在上面的代码中没有什么错，但是当我们的屏幕尺寸已经很小（其实我正在寻找像@media CSS属性的解决方案。我们都知道，当我们使用媒体时，可以通过检查器看到效果。我有一个代码，但无法正常工作
document.querySelector('style').textContent += "@media screen and (max-width:767px) {"+
$("#second").insertBefore("#first");+" }";
其实代码是不一样的。我编辑并尝试运行但无法正常工作。
如何通过媒体查询更改像小屏幕一样的元素？或任何其他解决方案，但必须响应
最佳答案
您是要根据屏幕宽度交换html元素吗？如果是这样，为什么不使用CSS？
<style>
.hidden {
display: none;
}
@media screen and (min-width: 768px) {
#first-copy, #second-copy {
display: block;
}
#first, #second {
display: none;
}
}
</style>
<html>
<div id="first" style="border: 1px solid; width: 100px; text-align: center">
<p>
first element
</p>
</div>
<div id="second" style="border: 1px solid; width: 100px; text-align: center">
<p>
second element
</p>
</div>
<div id="second-copy" class="hidden" style="border: 1px solid; width: 100px; text-align: center">
<p>
second element
</p>
</div>
<div id="first-copy" class="hidden" style="border: 1px solid; width: 100px; text-align: center">
<p>
first element
</p>
</div>
</html>
https://jsfiddle.net/8sug5pws/2/