Question

以下代码[jsfiddle] ...

var div = document.createElement("div");
div.innerHTML = "<foo>This is a <bar /> test. <br> Another test.</foo>";
alert(div.innerHTML);

...显示了这个解析过的结构：

<foo>This is a <bar> test. <br> Another test.</bar></foo>

即。浏览器知道<br>没有结束标记，但由于<bar>是浏览器的未知标记，因此它假定它需要一个结束标记。

我知道HTML5中忽略/>（solidus）语法而HTML4中无效，但无论如何想要以某种方式教授<bar>不需要结束标记的浏览器，我可以省略它。 这可能吗？

是的，我正在尝试（暂时）滥用自定义标记的HTML代码，我有具体的理由这样做。毕竟，浏览器应该忽略未知标记并将它们视为非样式内联标记，因此我不应该破坏任何内容，因为我可以确保标记名称不会用于真正的HTML标准。

Answer 1

你必须在HTMLElement.prototype上使用Object.defineProperty来覆盖innerHTML setter和getter以及你自己的innerHTML实现，它将你想要的元素视为void。查看here默认情况下如何实现innerHTML和HTML解析器。

请注意，虽然Firefox在HTMLElement.prototype上定义东西时会继续使用继承，例如，它会过滤到HTMLDivElement。事情应该在Opera中正常工作。

换句话说，哪些元素无效取决于HTML解析器。解析器遵循this list，innerHTML主要使用相同的规则。

因此，换句话说，除非你想在JS中创建自己的innerHTML实现，否则你可能应该忘记这一点。

您可以使用live DOM viewer向其他人展示如何解析某些标记。然后，您可能会注意到相同的结束标记将隐式关闭open元素。

我有一些过时的innerHTML getter（不是setter）代码here，它使用了一个void元素列表。这可能会给你一些想法。但是，编写setter实现可能会更困难。

另一方面，如果你使用createElement（）和appendChild（）等而不是innerHTML，你不必担心这一点，本机innerHTML getter将输出带有结束标记的未知元素。

但是请注意，您可以将未知元素视为xml，并使用XMLSerializer（）和DOMParser（）来执行操作：

var x = document.createElement("test");
var serializer = new XMLSerializer();
alert(serializer.serializeToString(x));
var parser = new DOMParser();
var doc = parser.parseFromString("<test/>", "application/xml");
var div = document.createElement("div");
div.appendChild(document.importNode(doc.documentElement, true));
alert(serializer.serializeToString(div));

这不是你想要的，而是你可以玩的东西。（在Opera中测试，而不是在Firefox中查看与xmlns属性的区别。另请注意，Chrome与Opera和Firefox不同。）

HTML中的自定义自动关闭/不配对标签？

1 个答案: