在前端开发中,我们经常需要创建 DOM 元素。通常情况下,我们使用的是 createElement()
方法来创建元素节点。但是,在某些情况下,我们需要创建具有特定命名空间的元素节点,这时候就需要使用createElementNS()
方法。
createElement() 方法
createElement()
是 Document 接口的一个方法,用于创建一个指定名称的元素节点。它可以创建任何标准 HTML 元素或 SVG 元素。
语法:
document.createElement(tagName);
其中,tagName
是要创建的元素的标签名,如 'div'
、'span'
等。
示例代码:
<div id="container"></div>
const container = document.getElementById('container'); const divElement = document.createElement('div'); divElement.innerText = 'Hello, world!'; container.appendChild(divElement);
首先,我们获取了页面上的一个元素节点,然后使用 createElement()
方法创建了一个新的 <div>
元素,并设置了其文本内容,最后将该元素添加到了容器节点中。
createElementNS() 方法
createElementNS()
是同样是 Document 接口的一个方法,用于创建一个指定命名空间和名称的元素节点。它通常用于创建 SVG 元素和其他 XML 命名空间的元素。
语法:
document.createElementNS(namespaceURI, qualifiedName);
其中,namespaceURI
是要创建的元素所属的命名空间的 URI,qualifiedName
是要创建的元素的限定名称(包括命名空间前缀和本地名称)。在 HTML 中,通常使用 http://www.w3.org/1999/xhtml
作为命名空间 URI。
示例代码:
<div id="container"></div>
-- -------------------- ---- ------- ----- --------- - ------------------------------------- ----- ---------- - ------------------------------------------------------ ------- -------------------------------- ------- --------------------------------- ------- ----- ------------- - ------------------------------------------------------ ---------- -------------------------------- ------ -------------------------------- ------ ------------------------------- ------ ---------------------------------- ------- -------------------------------------- ----------------------------------
首先,我们创建了一个 <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