createElement 破坏了内联块显示[关闭]答案

【问题标题】：createElement broke inline-block display [closed]createElement 破坏了内联块显示[关闭]
【发布时间】：2017-05-26 04:00:51
【问题描述】：

为什么 createElement 函数不在元素之间保留行内块空白？

Example problem

第一个带有普通 html 字符串连接的矩形：

var htmlString = '<div class='inline-block'...></div>'
$(parent).html(htmlString);

带有createElement DOM元素的第二个矩形输出：

var htmlString = createElement('div');

htmlString.className('inline-block');

...apendChild(htmlString);

为什么会有不同的输出？

谢谢

【问题讨论】：

当你用js打印这个时，第一个和第二个块之间的标记中是否有空格？你可以在jsfiddle.net 中重新创建它吗？
var htmlString = '<div class='inline-block'...></div>' 在字符串中未转义'
只是一个示例想法，而不是复制粘贴代码。为什么创建的 DOM 对象看起来不像 .html(string)
向我们展示一个重现问题的适当示例，我们会告诉您。 minimal reproducible example
使用可运行代码创建一个可重现的示例。还有一个选项可以在您的帖子中包含可运行的代码。

标签： javascript jquery html css

【解决方案1】：

要获得元素之间的空格，请在它们之间创建并附加一个textNode。

当您将String 添加到 HTML 时，字符串在该过程中被解析为 HTML，一个或多个空格组合形成一个空格，生成一个由 HTML 解析器完成的textNode。当您使用 createElement 字符串到 HTML 解析器时，不涉及因此 textNodes 需要由您自己生成。将其视为您自己生成具有更多控制权和责任感的 HTML。

var parent = document.getElementById('parent');
var htmlString = document.createElement('div');
htmlString.className= 'inline-block';
var textNode = document.createTextNode(' ');
var htmlString2 = document.createElement('div');
htmlString2.className= 'inline-block';
parent.appendChild(htmlString);
parent.appendChild(textNode);
parent.appendChild(htmlString2);

.inline-block {
  display: inline-block;
  width: 100px;
  height: 20px;
  border: 1px solid red;
}

&lt;div id="parent"&gt;&lt;/div&gt;

\n 也应该做同样的事情，不知道你是如何尝试添加换行符的。

var parent = document.getElementById('parent');
var htmlString = document.createElement('div');
htmlString.className= 'inline-block';
var textNode = document.createTextNode('\n');
var htmlString2 = document.createElement('div');
htmlString2.className= 'inline-block';
parent.appendChild(htmlString);
parent.appendChild(textNode);
parent.appendChild(htmlString2);

.inline-block {
  display: inline-block;
  width: 100px;
  height: 20px;
  border: 1px solid red;
}

&lt;div id="parent"&gt;&lt;/div&gt;

【讨论】：

不错，快速的答案。为什么会发生？谢谢
如果标记中有空格，@recoco 内联元素周围会有空格。您的 HTML 字符串可能在 DIV 元素之间有一个空格。当您通过 createElement() 创建 DIV 并将它们附加到 DOM 时，单个空间不存在。有关示例，请参阅此 JSFiddle。 JSFiddle 中的 .two 和 .three 可能代表您在 HTML 字符串中的内容，.one 类似于您使用 JS 创建它们的方式。
@hungerstar 哦，真的，我设置了 '\n' 我的代码。谢谢。我错了。
你是如何设置\n的，它也应该这样做，你能说明你是如何添加换行符的吗？