Question

我正在使用一些服务器端代码渲染类似的构造。服务器端代码在项目标签和文本字段之间插入硬回车。除了下面的jQuery代码插入项目标签和文本字段以外，没什么大不了的。

var projectLabel = $('<label for="project">Project</label>');
var projectField = $('<input type="text" name="project" id="projectName" />');
projectLabel.insertBefore($(this));
projectField.insertBefore($(this));

由于这种差异，呈现服务器端的元素在它们之间有空格，而在客户端上呈现的元素则没有。我尝试在每行末尾添加 无效。不幸的是，我无法删除服务器端代码输出的硬回车。进一步因为空间我无法用CSS解决这个问题。我有什么选择通过jQuery添加间距？

Answer 1

当服务器端代码使用label和input标记之间的空格创建时，它会插入发送到浏览器的文本。然后浏览器解释该文本（作为HTML）并构建DOM树。在客户端的jQuery中使用insertBefore()时，您将DOM节点直接插入树中。不同之处在于服务器生成的文本最终会创建三个兄弟节点：标签，文本节点，然后是输入;而客户端只创建两个节点：只是标签和输入。如果您创建一个具有单个空格的文本节点（它甚至不必是一个不间断的空间）并将其插入其他两个节点之间，它应该看起来是相同的。

projectLabel.insertBefore($(this));
textNode.insertBefore($(this));
projectField.insertBefore($(this));

我无法告诉你如何在jQuery中创建一个文本节点。

Answer 2

也许就像在构建项目时在projectLabel和projectField的末尾添加\ n一样简单？

Answer 3

我认为查看服务器端代码和输出会很有帮助。我不确定你是否想要获得这个空间。如果你的目标是将它们混合在一起，请尝试以下方法：

您可以尝试格式化输入和标签：

<label>Project<input type="text" name="project" id="projectName" /></label>

或者当你构建它时，将它构造成彼此相邻：

var projectLabelAndField = $('<label for="project">Project</label><input type="text" name="project" id="projectName" />');
projectLabelAndField.insertBefore($(this));

如何在通过jQuery添加元素后添加空间

3 个答案: