没有足迹的 HTML 元素，但可以是另一个元素的容器答案

【问题标题】：HTML element with no footprint, but can be a container for another element没有足迹的 HTML 元素，但可以是另一个元素的容器
【发布时间】：2012-07-30 23:49:18
【问题描述】：

是否有一个 HTML 元素，或者当与正确的 CSS 样式属性结合时，除了可以用作其他元素的容器之外没有占用空间的元素？

它几乎就像页面标记上的一个“标记”，实际的 HTML 应该由 jQuery 放置。

外观示例：

<span id='the_view_container' style='display:dont-do-anything'></span>

我问的原因是因为我正在使用 Backbonejs，当我必须向屏幕添加视图时，我发现我要么必须指定在创建视图时应该将视图挂钩的元素，这有它的缺点：

theView = new TheView({
    el:    $('#the-view-container')
});

或者我必须在现有元素中插入视图，通常是 div。这给模板带来了困难：

theView = new TheView({});
$('#the-view-container').html(theView.el);
$('#the-view-container').addClass('theViewClass');  // <-- Shouldn't have to do this

感谢任何意见，非常感谢！

【问题讨论】：

因此，如果我正确理解您的要求，您需要一个在填充内容之前是无大小的 HTML 元素（并且对页面渲染没有影响），并且可以通过 CSS 样式选择选择器？
@Nightfirecat - 是的，它只是指向页面上应该放置其中内容的位置。如果元素的开始和结束标记被注释掉，页面看起来会完全一样。
@ChrisDutrow 然后使用带有display:none 和visibility:hidden 的元素将是您所追求的。
@mariusnn - 这不会在添加 div 时也隐藏 div 的内容吗？
@ChrisDutrow 是的，但是当它们对用户可见（而不是在生成内容时）时，您确实想控制它们不是您的问题吗？

标签： html css backbone.js templating backbone-views

【解决方案1】：

（假设您的 CSS 没有异常重置）只需使用一个空的 <div> 并附加一个 ID。

<div id="backboneJScontent"></div>

由于默认情况下 div 的高度为 0，因此在为它们指定高度、边框、边距、轮廓或填充之前，它们不会在文档流中呈现任何空间。（默认情况下它们都没有）

然后，当您需要向其中插入内容时，您可以直接将其插入到该 div 中，只需使用 ID 选择它即可。

$("#backboneJScontent");

【讨论】：

当一个 div 被赋予内容时，它被赋予了空间，因此在 DOM 流中将内容添加到一个空的 div 会赋予它大小（除非样式设置为 display:none | jQuery .hide()）
据我了解，提问者只需要它是无大小的，直到它充满内容，这是默认行为。

【解决方案2】：

最好动态创建一个元素。

但是，您可以像这样创建一个“无”元素：

<div id="nothing" style="display: none; visibility: hidden; width: 0; height: 0; line-height: 0"></div>

然后在需要时设置style：

$('#nothing').css('');

【讨论】：

这个问题是视图的模板不能包含所有必要的CSS。程序逻辑必须包含顶级类。
为什么不呢？您可以包含样式表并通过 class 应用 CSS 吗？

【解决方案3】：

没有附加到文档流的 DOM 元素应该可以解决问题。试试div，例如：

var detachedDiv = $('<div/>');

theView = new TheView({
    el:    detachedDiv
});

然后，当您希望附加视图时，您可以将其附加到 <body>，例如：

$('body').append(detachedDiv);

【讨论】：