我正在使用javascript在dom中添加一个元素。我添加了一个使用 insertBefore() 将其放置在移动视图上我想要的位置。但是在桌面上，它应该放在网站上的不同空间。我该如何解决这个问题？
仅使用 CSS 不是一种选择，因为我无法移动的现有元素。
var priceWrapper = document.querySelector('.price-info-wrap')
var mainContainer = document.querySelector('.price-info')
var addUrgency = document.getElementById('urgency')
priceWrapper.insertBefore(addUrgency, mainContainer)
提供的代码是我放置"addUrgency"女巫的方式，是我需要放在桌面上其他地方的div。
你可以这样做，但这是一个坏主意。
从您需要的最小屏幕宽度开始布局您的元素，然后使用 CSS Media 查询从那里向外工作，以在需要时以特定的屏幕宽度调整布局。
在这种情况下，如果您不能以任何其他方式执行此操作，则可以将两个元素都放在您喜欢的位置，然后根据视口宽度显示/隐藏。像这样：
@media (min-width:800px) {
//your non-mobile styles and classes go here
.desktop-element{
display: inline-block;
}
.mobile-element{
display:none;
}
}
您可以使用navigator.userAgent并确定浏览器是否为移动浏览器。还有一个问题，在StackOverflow上做到这一点得到了很好的答案：检测移动浏览器
另一种选择是使用 javascript 检查视口大小。如果您有响应视口大小的 css 规则，这可能是一个更好的解决方案，例如：@media (width)：
let width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
之后，决定放置元素的位置是一个简单的 if-else。
您可以使用 onresize 事件。但是，我必须注意，在 DOM 中的正确位置有两个相同的元素(也许使用 clone() 复制 #addUrgency)并使用 CSS 媒体查询显示/不显示它们，而不是每次调整视口大小时使用 Javascript 重新放置元素是一个更好的解决方案。但是，在这里回答您的问题是使用您的代码的最直接的方法。还值得注意的是，调整大小事件可以非常快速地触发，因此您可能需要限制函数中继(答案在 StackOverflow 上)。
function relay(){
var addUrgency = document.getElementById('urgency');
if(`mobile view`){ //here goes a condition to determine what view you have.
var priceWrapper = document.querySelector('.price-info-wrap');
var mainContainer = document.querySelector('.price-info');
priceWrapper.insertBefore(addUrgency, mainContainer);
}else{
// Insert where you want it on desktop view
}
}
window.onload = function() {
relay();
document.body.addEventListener("resize", relay);
};
你可以使用JavaScript来做到这一点，但我不推荐这种方法，因为我相信这在大多数情况下是可以实现的。一种方法是使用display: grid并将元素放置在移动设备上所需的行/列中(如果您当然使用移动优先的方法)，然后通过媒体查询将它们重新分发到更大的屏幕上。此外，您当然可以在此策略不能完全完成工作时使用position: absolute。
这是一篇很棒的文章，以防您不完全熟悉display: grid.