动态添加jQuery元素的样式

Question

以下是演示：

http://jsfiddle.net/JH7SU/1/

我很困惑为什么相同的标记会出现不同，这取决于它是静态还是负载。我猜它与如何解析DOM有关，并且样式在某种程度上没有从父元素中正确地继承？

上下文是我正在设计一个交互式表单，其逻辑太复杂而不能隐藏/显示元素。因此，我想动态创建/销毁新元素（但使用适当的CSS）。

感谢您的帮助！

Answer 1

这是因为，在您的静态html中，select和input分为两行，表示它们之间有一些空格。如果你想在动态中获得它，你也必须在那里添加空间。

这是working fiddle。

但我强烈建议您避免这种定位，并对margin和padding使用严格的CSS样式。以下是使用CSS的corrected fiddle。

Answer 2

select和input元素的样式为inline-block，因此如果标记中存在空格，则将它们视为内联元素，并在它们之间留出空格。

在附加动态元素之前插入空格或换行符，或删除静态元素中的换行符。

没有空格的示例：http://jsfiddle.net/bhJg8/ 空格示例：http://jsfiddle.net/fr5W7/

Answer 3

这是通常的问题：空白。您的静态表单在</select>和<input>之间有一个换行符，该换行符在表单中变为空白。但是当你动态追加元素时，它们之间没有任何东西。

将其更改为：

dynamicControls.append(dynamicSelect, ' ', dynamicInput);

他们看起来都一样。

或者如果您更喜欢动态元素的外观，请删除静态版本中的空白。

Answer 4

这就是html在代码中附加的方式。它与你如何真实地输入它有所不同。有趣的是，这对你有用。

dynamicControls.append(dynamicSelect);
dynamicControls.append('\r\n');
dynamicControls.append(dynamicInput);