Javascript 如何在不复制的情况下将内容插入筛选器按钮

有没有一种方法可以在不复制内容的情况下将内容插入过滤器按钮

例如，如果您看到本例中的内容，“Hello world”在过滤器折叠按钮内重复

其想法是在大中型设备上显示内容而不使用过滤按钮，在小型设备上可折叠，因此用户可以在需要时折叠内容。这将节省页面的长度并提供良好的UX/UI

你好，世界

滤器
你好，世界

这是一个人为的示例，但您可以使用文本维护一个变量，并使用

window.matchMedia

检查设备尺寸并动态添加或删除该文本。比如：

function addText(query) {
  const text = document.createTextNode("Hello world");
  if (query.matches) {
    document.body.style.backgroundColor = "yellow";
    sidebar.appendChild(text);
    desktop.innerText = '';
  } else {
    document.body.style.backgroundColor = "pink";
    desktop.appendChild(text);
    sidebar.innerText = '';
  }
}
const desktop = document.getElementById('desktop-div');
const sidebar = document.getElementById('sidebar-collapse');
const query = window.matchMedia("(max-width: 350px)");
addText(query);
query.addListener(addText);

更新的JSFIDLE

---

但我相信，根据使用CSS媒体查询的设备，保留重复文本并隐藏或显示它更简单。

似乎不清楚您到底想要什么。你能创建一个代码笔吗？这里是：我没有看到任何JS。做什么会发生什么？所以我想要的是：如果你看到col-6中的内容，那就是“Hello world”。在小型设备上，它应该进入按钮折叠内部，而不复制它。纯HTML/CSS不可能吗？我不知道怎么做。