createElement(...) 和 createElementNS('http://www.w3.org/1999/xhtml', ...) 有什么区别答案

【问题标题】：What is the difference between createElement(...) and createElementNS('http://www.w3.org/1999/xhtml', ...)createElement(...) 和 createElementNS('http://www.w3.org/1999/xhtml', ...) 有什么区别
【发布时间】：2019-08-24 17:25:39
【问题描述】：

我不明白 createElement(...) 和 createElementNS('http://www.w3.org/1999/xhtml', ...) 之间的区别

你可以试试下面的代码：

var element1 = document.createElement('form:form');
var element2 = document.createElementNS('http://www.w3.org/1999/xhtml', 'form:form');

console.log(element1.tagName); // FORM:FORM
console.log(element1.localName); // form:form

console.log(element2.tagName); // FORM:FORM
console.log(element2.localName); // form

我在想这将是相同的结果，但根本不是。有人知道为什么吗？

【问题讨论】：

标签： javascript dom browser

【解决方案1】：

createElement 和 createElementNS 之间的区别在于您可以在 createElementNS 中指定命名空间 URI，而 createElement 不允许这样做。

createElementNS 可以在需要从 JS 创建 SVG 时使用。 AS SVG 需要命名空间 URI。您可以从这里检查有效的命名空间： https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#Important_Namespace_URIs

如果您在 HTML 中创建元素，那么您可以使用 createElement，因为其中不需要 namespace，但是如果您在 XHTML 中创建 HTML，那么您需要根据 XHTML 的需要使用 createElementNS namespace 与它。

【讨论】：

HTML 文档的命名空间URI 是"http://www.w3.org/1999/xhtml"，所以在这种情况下createElementNS('http://www.w3.org/1999/xhtml'... 和createElement(... 应该是一样的。我想你在这里错过了这个问题。（提示：关于:）

【解决方案2】：

标记中的命名空间由namespace:element 语法标记（或namespace:attribute） DOM 方法 createElementNS 和 setAttributeNS 不需要这种语法来在给定的命名空间中创建元素，但由于标记语法允许它，它们仍然会识别它并忽略它。

这样当你对文档进行字符串化时，你可以拥有

<html xmlns:form="http://www.w3.org/1999/xhtml">
  <form:form></form>
</html>

而不是一些难以阅读的东西

<html xmlns:NS0="http://www.w3.org/1999/xhtml">
  <NS0:form></form>
</html>

createElement 和 setAttribute 方法不会识别这种语法，并且会真正创建一个 <xmlns:form:form></form> 元素。

【讨论】：