Question

为什么createElement函数没有在元素之间保持内联块空格？

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

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

使用createElement DOM元素的第二个矩形输出：

var htmlString = createElement（'div'）;

htmlString.className（ '内联块'）;

... apendChild（htmlString）;

为什么输出不同？

由于

Answer 1

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

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

＆＃13;

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);

＆＃13;

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

＆＃13;

<div id="parent"></div>

＆＃13;

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

＆＃13;

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);

＆＃13;

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

＆＃13;

<div id="parent"></div>

＆＃13;

createElement打破了内联块显示

1 个答案: