1. Web
  2. Les API Web
  3. Document
  4. createElementNS()

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Document : méthode createElementNS()

Baseline Large disponibilité *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La méthode createElementNS() de l'interface Document crée un nouvel élément avec l'URI de l'espace de noms défini et un nom qualifié.

C'est utile dans les documents à espaces de noms mixtes, tels que SVG ou MathML intégrés dans HTML, où l'analyseur ne peut pas déduire de manière fiable l'espace de noms.

La méthode createElement() est plus simple si vous souhaitez créer un élément HTML simple.

Syntaxe

js
createElementNS(namespaceURI, qualifiedName)
createElementNS(namespaceURI, qualifiedName, options)

Paramètres

namespaceURI

Une chaîne de caractères qui définit un namespaceURI à associer à l'élément. Certains d'espaces de noms d'URI importants sont 

HTML

http://www.w3.org/1999/xhtml

SVG

http://www.w3.org/2000/svg

MathML

http://www.w3.org/1998/Math/MathML

qualifiedName

Une chaîne de caractères contenant le nom qualifié du nouvel élément. La propriété nodeName de l'élément créé est initialisée avec cette valeur.

Le format du nom qualifié est prefix:localName ou localName, où les parties sont définies comme suit :

prefix Facultatif

Un « alias court » pour l'espace de noms. Le préfixe est facultatif, mais s'il est défini, le paramètre namespaceURI doit également être défini. Si le préfixe est défini sur xml ou xmlns, le namespaceURI doit être défini respectivement sur http://www.w3.org/XML/1998/namespace ou http://www.w3.org/2000/xmlns/.

La valeur est utilisée pour initialiser la nouvelle propriété prefix de l'élément. Par défaut, elle vaut null.

localName

Le nom local de l'élément. La valeur est utilisée pour initialiser la nouvelle propriété localName de l'élément.

options Facultatif

Un objet avec les propriétés optionnelles suivantes (notez que seule l'une des propriétés is et customElementRegistry peut être définie) :

is Facultatif

Une chaîne de caractères définissant le nom de balise d'un élément personnalisé précédemment défini à l'aide de customElements.define(). Le nouvel élément reçoit un attribut is dont la valeur est le nom de la balise de l'élément personnalisé.

customElementRegistry Facultatif

Un CustomElementRegistry qui définit le registre d'éléments personnalisés à portée locale d'un élément personnalisé.

Pour la rétrocompatibilité, certains navigateurs permettent de passer une chaîne de caractères ici à la place d'un objet, où la valeur de la chaîne de caractères est le nom de la balise de l'élément personnalisé. Voir Étendre les éléments HTML natifs (angl.) pour plus d'informations sur l'utilisation de ce paramètre.

Valeur de retour

L'objet Element nouvellement créé.

Exceptions

NamespaceError DOMException

Levée si la valeur de namespaceURI est :

  • pas un URI d'espace de noms valide.
  • défini sur la chaîne de caractères vide lorsque prefix a une valeur.
  • pas la valeur http://www.w3.org/XML/1998/namespace ou http://www.w3.org/2000/xmlns/ lorsque prefix est défini sur xml ou xmlns, respectivement.
InvalidCharacterError DOMException

Levée si prefix ou localName n'est pas valide :

  • Le prefix doit contenir au moins un caractère et ne peut pas contenir d'espaces ASCII, NULL, / ou > (U+0000, U+002F ou U+003E, respectivement).
  • Le localName est un nom d'élément valide s'il a une longueur d'au moins 1 et :
    • il commence par un caractère alphabétique et ne contient pas d'espaces ASCII, NULL, / ou > (U+0000, U+002F ou U+003E, respectivement).
    • il commence par : (U+003A), _ (U+005F) ou tout caractère dans la plage U+0080 à U+10FFFF (inclus), et les points de code restants ne contiennent que ces mêmes caractères ainsi que les caractères alphanumériques ASCII, - (U+002D) et . (U+002E),

Note : Les versions antérieures de la spécification étaient plus restrictives, exigeant que le qualifiedName soit un nom XML (angl.) valide.

NotSupportedError DOMException

Levée si les options is et customElementRegistry sont toutes deux définies.

Exemples

Utilisation simple

Voici comment créer un nouvel élément <div> dans l'espace de noms XHTML.

js
const divElementXHTML = document.createElementNS(
  "http://www.w3.org/1999/xhtml",
  "div",
);

// Ceci est équivalent !
const divElementHTML = document.createElement("div");

Créer un élément SVG

Voici comment créer un élément SVG (SVGSVGElement) et l'ajouter à l'élément HTML <body>.

L'utilisation de createElementNS() avec l'espace de noms SVG est nécessaire lorsqu'on travaille avec un document HTML. Si vous appeliez createElement("svg"), un objet HTMLUnknownElement est retourné, et le SVG n'est pas rendu.

js
const svgNS = "http://www.w3.org/2000/svg";

const svg = document.createElementNS(svgNS, "svg");
svg.setAttribute("width", "100");
svg.setAttribute("height", "100");

const circle = document.createElementNS(svgNS, "circle");
circle.setAttribute("cx", "50");
circle.setAttribute("cy", "50");
circle.setAttribute("r", "40");
circle.setAttribute("fill", "steelblue");

svg.appendChild(circle);
document.body.appendChild(svg);

Spécifications

Spécification
DOM
# ref-for-dom-document-createelementns①

Compatibilité des navigateurs

Voir aussi

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu