Document.createElementNS() - 名前空間を持つ要素を作成する

2017/10/07

createElementNS()は、Documentのメソッドです。名前空間を持つ要素を作成します。例えばsvg要素は、このメソッドで作成します。

概要

名前

createElementNS

所属

IDL

[NewObject] Element createElementNS(DOMString? namespace, DOMString qualifiedName, optional ElementCreationOptions options);

dictionary ElementCreationOptions {
  DOMString is;
};

仕様書

https://dom.spec.whatwg.org/#dom-document-createelementns

説明

第1引数(namespace)には、名前空間URIを指定します。

第2引数(qualifiedName)には、タグ名を指定します。

第3引数(options)には、カスタム要素で利用するオプションをオブジェクトで指定します。

返り値は、新しく作成した要素(Element)です。

チュートリアル

createElementNS()は、新しく要素を作成するメソッドです。作成したい要素のタグ名を引数に指定しましょう。

var element = document.createElementNS( "http://www.w3.org/2000/svg", "svg" ) ;	// <svg></svg>

デモ

Document.createElementNS()のデモです。svg要素を作成しています。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<body>
<script>
var element = document.createElementNS( "http://www.w3.org/2000/svg", "svg" ) ;

console.log( element ) ;

element.setAttribute( "width", "50" ) ;
element.setAttribute( "height", "50" ) ;
element.innerHTML = '<circle cx="25" cy="25" r="25" fill="red">' ;

document.body.appendChild( element ) ;
</script>
</body>
</html>