html - 当附加一个元素到带有 innerHTML 的 div div 也“向下”

Question

这个问题很容易用这里的例子来描述。

代码如下：

HTML：

<div id="example">Hello </div>

JS：

document.getElementById('example').innerHTML += '<details style="display: inline"><summary>World</summary>Something</details>';

问题是，当我点击“World”时，会出现“Something”，但“Hello”也会关闭，如下所示：

我希望当你点击“世界”时，“你好”保持在原位。

有什么建议么？提前致谢！

Answer 1

设置似乎得到了我认为你想要的布局vertical-align: top。#example的HTML：

<div id="example">Hello <details><summary>World</summary>Something</details></div>

和CSS：

#example {
    vertical-align: top;
}
details {
    display: inline;
}

最后，强制性小提琴：http: //jsfiddle.net/ambiguous/cJPRz/