如何在不破坏标记的情况下使用包装器包装任意HTML？

Question

我有以下HTML代码：

some text [selected HTML] more text

我希望用标记元素包裹[选定的HTML]部分，这样我可以a）应用一些标记（将其涂成浅蓝色），并且b）可以使用jQuery找到它，c）当我将所有HTML发送到服务器时，我还可以为服务器加上标记。如何做到不改变页面外观呢？

如果我使用DIV元素，那么它会创建一个块级元素，但如果任意HTML只是文本，则绝对不想要这种情况。

some text 
<div>[selected HTML which is text]</div>
more text

如果我使用SPAN元素（即使带有style='display:inline-block'），那么我会认为任意的HTML是内联的，但我不能这样假设。在DIV周围包装SPAN是无效的，对吗？

some text 
<span style='inline-block;'>[selected HTML with <div>]</span>
more text

有没有什么工具可以简单地“标记”HTML，而不会在其周围创建块或内联元素？

- Willem Mulder

---

定义“破坏性标记”。为什么避免无效的HTML比解决你在这里遇到的问题更重要？我并不是说它不重要，只是想明确你的优先事项。 - robertc

我同意，更多的上下文会非常有帮助。 - Wesley Murch

嗯，好问题。在客户端，我并不真的关心有效性。我只需要能够使用例如jQuery引用任意HTML。我还需要将这些标记发送到服务器。但是当HTML被发送到服务器时，服务器使用一些HTML解析，并且仅允许有效的HTML。 现在我在想：我可以在客户端使用<span style="display: inline-block"/>（无效的HTML但可以正常工作），然后在将其发送到服务器时替换为<div>... 嗯。 - Willem Mulder

我也更新了问题... - Willem Mulder

Answer 1

有一个元素“简单地‘标记’HTML，但不会在其周围创建块或内联元素”，即 ins 元素。语法上，ins 和 del 元素“可以作为块级元素或内联元素（但不能同时）。它们可以包含一个段落中的一个或多个单词，也可以包含一个或多个块级元素，例如段落、列表和表格”。

原则上，ins 表示已经“插入到文档的不同版本中”的内容。但我认为除了现代浏览器通常默认下划线内容之外，没有任何软件会严格遵守这一点。不过，这种行为（在 CSS 2.1 规范和 HTML5 草案中得到鼓励）可以相当简单地覆盖，只需要考虑 CSS 的常规警告即可。

ins { text-decoration: none; }

- Jukka K. Korpela

---

有趣，是的，它似乎确实验证了：<ins><div><p>Hello <ins><span>World!</span></ins></p></div></ins> 我建议给 ins 添加一个类，并以这种方式“取消”样式，以防 ins 在其他地方被“合法”使用。 - Wesley Murch

另外，HTML注释作为分隔符可能本可以为作者服务，但问题在于他也希望使用CSS来对这些部分进行样式设计。最终可能会有点巧妙而棘手...但是，还是很好的答案！ - Wesley Murch

除了我们可能会就使用<ins>进行语义讨论之外，这基本上就是我想要的！事实证明，“透明内容模型”在这里是关键。有关更多信息，请参见http://www.html-5.com/tags/element-content-models.html#transparent-content-model和https://developer.mozilla.org/en-US/docs/HTML/Content_categories :-) - Willem Mulder