createElement vs. createElementNS

by

To understand the problem namespaces are trying to solve, consider file extensions. 3-letter file extensions have done a really bad job of describing the content of files. They’re ambiguous and don’t carry version info. XML namespaces use a larger space of strings, URIs, to solve the same problem, and use short prefixes so you can succinctly mix multiple kinds of XML in the same document.

What’s the purpose of namespace if there is only one name space?

There are many namespaces used to identify different kinds of XML, and different versions of those kind.

SVG and MathML are two kinds of XML each with their own namespaces that can be embedded in HTML5, and they often use XLink, another XML namespace. Many other XML schemas, with corresponding namespaces, are used for passing messages between clients and servers and for data storage.

XHTML is an attempt to express HTML as valid XML. It has its own namespace.

So we use createElementNS(ns_string, ‘svg’) And then setAttributeNS(null,,). Why? Why not setAttributeNS(‘my_ns’,,)???

You should probably try to consistently use setAttributeNS with a namespace URI when using createElementNS with a namespace URI.

XML was defined in multiple steps. The first version of the spec said nothing about namespaces but left enough syntax so that XML with namespaces could be specified on top of XML without namespaces by using prefixes and special xmlns attributes. The XML specification says:

“The Namespaces in XML Recommendation [XML Names] assigns a meaning to names containing colon characters. Therefore, authors should not use the colon in XML names except for namespace purposes, but XML processors must accept the colon as a name character.”

XML namespaces let XML processing applications know what they’re dealing with, and allow multiple kinds of XML to be mixed together in the same document.

Why ns_string must be “http://www.w3.org/2000/svg“

This includes the year that version of SVG was standardized, 2000, so it carries useful information.

When used with xmlns:svg it also lets the browser know that the svg: prefix means SVG and not some other dialect of XML.

More Related Contents:

  1. jQuery. Find all attribute values within/under elements `script or noscript or iframe` that have attribute keys as `src or href` [closed]
  2. When I load the page the alert(“hey”) function appears, why does the js function execute despite no onClick call? How do I prevent it from doing so?
  3. What is the difference between properties and attributes in HTML?
  4. How to stop event propagation with inline onclick attribute?
  5. “Submit is not a function” error in JavaScript
  6. How can I select an element by name with jQuery?
  7. What is the most efficient way to create HTML elements using jQuery?
  8. Can scripts be inserted with innerHTML?
  9. How to resolve the C:\fakepath?
  10. How can I simulate a click to an anchor tag?
  11. Finding line-wraps
  12. How to get the element clicked (for the whole document)?
  13. What is offsetHeight, clientHeight, scrollHeight?
  14. How can I get the DOM element which contains the current selection?
  15. How to avoid the need for ctrl-click in a multi-select box using Javascript?
  16. How to Implement DOM Data Binding in JavaScript
  17. Can I load an entire HTML document into a document fragment in Internet Explorer?
  18. Getting value of HTML Checkbox from onclick/onchange events
  19. Select all elements with a “data-xxx” attribute without using jQuery
  20. Get the DOM path of the clicked
  21. contentDocument for an iframe
  22. Remove specific HTML tag with its content from javascript string
  23. Is it the last `script` element the currently running script?
  24. Get elements from page.evaluate in Puppeteer? [duplicate]
  25. React, losing saved data in localStorage with useEffect after page refresh
  26. Getting HTML elements by their attribute names
  27. How to escape HTML
  28. User Activity Tracking using javascript library [closed]
  29. Boolean HTML Attributes
  30. Is there a way to know if a link/script is still pending or has it failed

Leave a Comment