在网页开发中，有时我们需要让一个 DOM 元素在不同位置同步显示，以满足特定的用户交互和页面布局需求。以下将介绍几种实现这一效果的有效方法。

可以使用 JavaScript 来操作 DOM。通过获取要同步显示的目标元素以及多个需要显示该元素的位置节点，利用 cloneNode 方法复制目标元素。例如：

const originalElement = document.getElementById('original');
const newLocation1 = document.getElementById('location1');
const newLocation2 = document.getElementById('location2');

const clonedElement1 = originalElement.cloneNode(true);
const clonedElement2 = originalElement.cloneNode(true);

newLocation1.appendChild(clonedElement1);
newLocation2.appendChild(clonedElement2);

这段代码中，cloneNode(true) 表示深度克隆，会复制元素及其所有子元素。然后将克隆的元素添加到指定的不同位置。但要注意，这样只是初始的同步显示，如果原始元素有后续的动态变化，还需要额外监听原始元素的变化事件，再同步更新克隆元素。

另一种方法是利用 CSS 的 display 属性结合 HTML 结构调整。我们可以将原始元素隐藏，然后在不同位置使用 :before 或 :after 伪元素来模拟显示相同内容。例如：

#original {
  display: none;
}
#location1:before {
  content: attr(data-original-text);
}
#location2:before {
  content: attr(data-original-text);
}

在 HTML 中为原始元素添加 data-original-text 属性存储要显示的内容。这种方法相对简洁，适用于内容较为简单且不需要频繁动态更新的情况。

还有一种借助框架的方式，如 React 或 Vue 等。以 React 为例，可以将需要同步显示的内容封装成一个组件，然后在不同的地方引入该组件。这样无论组件内部如何变化，在多个引入位置都会同步更新。

实现一个 DOM 元素在不同位置同步显示有多种途径，开发者可以根据项目的具体需求、复杂度以及性能要求来选择合适的方法。无论是使用原生 JavaScript、CSS 技巧还是借助前端框架，都能达到让用户体验更加流畅和便捷的目的。