javascript - 在屏幕外添加/附加一个 div？

Question

我正在尝试创建一个具有两个按钮的 div:一个用于在原始 不移动原始 div 的位置 的右侧添加一个相同大小的 div，另一个用于在原来的右边追加一个 div。

向左追加工作正常，但向左前置会将整个容器移到 shown here 上

我用来添加元素的代码:

$(document).ready(function() {
  $("#back").on("click", function(e) {
    e.preventDefault();
    $("#center").before("<div id='back' class='inside'></div>");
  });
  $("#next").on("click", function(e) {
    e.preventDefault();
    $("#center").after("<div id='next' class='inside'></div>");
  });
});

如何在不移动原始 div 位置的情况下将原始 div 置于“屏幕外”？提前致谢!

Answer 1

最好使用 CSS 解决您的问题。

只需在初始插入时将 display:none 设置到左侧 DIV。

改变这个:

$("#center").before("<div id='back' class='inside'></div>");

对此:

$("#center").before("<div id='back' class='inside' style='display:none;'></div>");

并在您希望它可见时删除该 CSS 属性:

$('#back').css('display', '');

但是，在大多数情况下，使用内联样式是不好的做法。您应该考虑通过分配给元素 ID #back 的样式表来设置 display:none。对于可维护的代码，您希望保持样式 (CSS)、结构 (HTML) 和 UI 功能 (JS) 的清晰分离。