调整或隐藏div位置：直接用JS修改还是新增div后隐藏原有元素？

问题一解答 #

不需要新建div，直接通过JS修改原有元素位置是更简洁的方案，仅当你需要保留原位置状态、做切换对比或有特殊业务逻辑时才需要新增div。
直接修改的两种常见实现方案：

• 方案1：修改transform属性（性能最优，不会触发页面重排），适合仅做位置偏移的场景：

const adjustBtn = document.getElementById('你的按钮ID')
const grumBox = document.querySelector('.grum')
const fixoumBox = document.querySelector('.fixoum')

adjustBtn.addEventListener('click', () => {
  // 括号内第一个值为水平偏移量，第二个为垂直偏移量，负数对应反方向
  grumBox.style.transform = 'translateX(100px) translateY(50px)'
  fixoumBox.style.transform = 'translateX(200px) translateY(50px)'
})

• 方案2：预定义CSS类，点击时给元素加类，更便于后续维护：

/* 预先写好位置样式 */
.grum-moved {
  transform: translate(100px, 50px);
}
.fixoum-moved {
  transform: translate(200px, 50px);
}

adjustBtn.addEventListener('click', () => {
  grumBox.classList.add('grum-moved')
  fixoumBox.classList.add('fixoum-moved')
})

如果需要基于父容器.um做绝对定位，只需要给.grum和.fixoum的样式加上position: absolute后，直接修改元素的top/left属性即可。

问题二解答 #

如果确实需要新增div承载目标位置的内容，隐藏原有div的实现方式如下：

1. 先预定义隐藏样式：

.hidden {
  display: none !important;
}

2. 点击按钮完成新div插入后，给原有元素加隐藏类即可：

adjustBtn.addEventListener('click', () => {
  // 插入你需要的新div逻辑
  const newBox = document.createElement('div')
  newBox.className = '自定义类名'
  document.querySelector('.um').appendChild(newBox)
  // 隐藏原有元素
  grumBox.classList.add('hidden')
  fixoumBox.classList.add('hidden')
})

也可以直接给元素加hidden属性实现隐藏：grumBox.hidden = true。

内容的提问来源于stack exchange，提问作者Francisco Serra