在前端开发中，我们经常需要创建 DOM 元素。通常情况下，我们使用的是 createElement() 方法来创建元素节点。但是，在某些情况下，我们需要创建具有特定命名空间的元素节点，这时候就需要使用createElementNS()方法。
createElement() 方法
createElement() 是 Document 接口的一个方法，用于创建一个指定名称的元素节点。它可以创建任何标准 HTML 元素或 SVG 元素。
语法：
--------------------------------
其中，tagName 是要创建的元素的标签名，如 'div'、'span' 等。
示例代码：
---- ---------------------
----- --------- - ------------------------------------- ----- ---------- - ------------------------------ -------------------- - ------- -------- ----------------------------------
首先，我们获取了页面上的一个元素节点，然后使用 createElement() 方法创建了一个新的 <div> 元素，并设置了其文本内容，最后将该元素添加到了容器节点中。
createElementNS() 方法
createElementNS() 是同样是 Document 接口的一个方法，用于创建一个指定命名空间和名称的元素节点。它通常用于创建 SVG 元素和其他 XML 命名空间的元素。
语法：
-------------------------------------- ---------------
其中，namespaceURI 是要创建的元素所属的命名空间的 URI，qualifiedName 是要创建的元素的限定名称（包括命名空间前缀和本地名称）。在 HTML 中，通常使用 http://www.w3.org/1999/xhtml 作为命名空间 URI。
示例代码：
---- ---------------------
----- --------- - ------------------------------------- ----- ---------- - ------------------------------------------------------ ------- -------------------------------- ------- --------------------------------- ------- ----- ------------- - ------------------------------------------------------ ---------- -------------------------------- ------ -------------------------------- ------ ------------------------------- ------ ---------------------------------- ------- -------------------------------------- ----------------------------------
首先，我们创建了一个 <svg> 元素，并设置了它的宽度和高度属性。然后，我们创建了一个 <circle> 元素，并设置了其属性，最后将其添加到了 SVG 元素中，SVG 元素再添加到了容器节点中。
createElement() 方法与 createElementNS() 方法的区别
两种方法的参数不同，即 createElement() 只有一个参数 tagName，而 createElementNS() 需要两个参数 namespaceURI 和 qualifiedName。
另外，createElement() 创建的元素默认属于 HTML 命名空间，而 createElementNS() 可以用来创建任意命名空间下的元素，如 SVG 命名空间。
总结
在前端开发中，我们经常需要创建 DOM 元素，而 createElement() 方法是我们最常用的方法。但是，在某些情况下，我们需要创建具有特定命名空间的元素节点，这时候就需要使用createElementNS()方法。
值得注意的是，我们通常只有在需要使用 SVG 元素或其他 XML 命名空间的元素时才需要使用 createElementNS()。对于大多数 HTML 元素，我们仍然可以使用 createElement() 来创建。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/15382