javascript - 如何设置临时填充？

Question

注意:我想我的问题标题与我的真实问题无关(有点)。

这是我的代码:

.one{
  background-color: gray;
}
.two{
  padding: 20px;
}

<div class = "one">
  <div class = "two">
    <span>something</span>
  </div>
</div>

<br>

<div class = "one">
    <span>something</span>
</div>

我需要管理这两个 block 看起来如何相同。实际上，div.two 最初并不存在，过一段时间就会添加。因此，我希望在附加 div.two 时保持 UI 不发生任何更改。我怎样才能做到这一点？

总之，我需要同时使两个 div.one 元素具有相同的外观。那可能吗？ (注意到我希望它们都像第一个一样)

Answer 1

是否可以使用 visibility:hidden; 而不是附加一个新的？无需追加，只需更改 visibility:visible;

.one{
  background-color: gray;
}
.two{
  visibility: hidden;
  padding: 20px;
}

https://jsfiddle.net/Hastig/bx2kwjmw/

或者您可以向父元素添加填充...

.one{
  background-color: gray;
  padding: 20px;
}
.two{

}

https://jsfiddle.net/Hastig/bx2kwjmw/1/

编辑，我又玩了一会儿，发现父 div 上的填充不是解决方案，因为一旦插入文本，高度仍然会因为文本大小而增加。

这里有一个新的 fiddle ，展示了如何放入不可见的幽灵文本作为占位符来调整大小，然后在使用插件附加内容时将其删除。

这只是一个想法，应该有很多方法来实现它..

https://jsfiddle.net/Hastig/bx2kwjmw/5/

$('.plugin-append-simulator').click(function() {
  var content = '<div class="two">something</div>';
  $('.one').html('').append(content);
});

// $('.one') | selects .one
// .html('') | removes ghost text
// .append(content) | appends your content

.one {
  background-color: gray;
  padding: 20px;
  color: hsla(0, 0%, 0%, 0);
}
.two {
  color: hsla(0, 0%, 0%, 1);
}


/* scaffolding. ignore this */.plugin-append-simulator { position: fixed;bottom: 0;left: 50%; transform: translateX(-50%);display: inline-flex;padding: 3px 8px 1px 8px;color: white;background-color: black;cursor: pointer;
}.plugin-append-simulator:hover { background-color: red; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="one">ghost text</div>

<!-- ignore, scaffolding -->
<div class="plugin-append-simulator">simulate plugin append</div>

旧版本可将填充从父级切换到子级..

https://jsfiddle.net/Hastig/bx2kwjmw/6/