CODEWITHSUNDEEP
javascripthtmlxml-namespaces
aleclofabbro
aleclofabbro

Reputation: 1699

Browser custom namespaced element processors

in browser environment, creating an svg element this way
svg = document.createElement('svg');
appending it to body and populating with svg elements does not work, because
svg.namespaceURI === 'http://www.w3.org/1999/xhtml'
but doing this way
svg = document.createElementNS('http://www.w3.org/2000/svg','svg')
it will work.
That's reasonable as that element should be processed in svg way and not in html way
similarly, creating
select = document.createElementNS('xxxx','select')
and appending to body, the element won't show up as a well known select dropdown, because the browser is informed that it is not an http://www.w3.org/1999/xhtml:select element but it is an xxxx:select instead.
It seemes like node processing are dispatched to different processors depending on the NS(when recognized) of the node itself.
Is it possible to define a custom namespaceURI for a Document in order to let its nodes with that specific nsURI to be processed in a custom fashion, likely through a function ?

Upvotes: 0

Views: 50

Answers (1)

guest271314
guest271314

Reputation: 1

Note, not certain what expected result is ? Answer attempts to demonstrate one method of using a ProcessingInstruction

// create `ProcessingInstruction`
var p = document.createProcessingInstruction("js", "{\"color\":\"blue\"}");
var div = document.getElementById("process");
document.body.insertBefore(p, div);
// use `ProcessingInstruction`
div.style.color = JSON.parse(div.previousSibling.nodeValue).color;
<!doctype html>
<html>
<body>
  <div id="process">Process</div>
</body>
</html>

Upvotes: 1

Related Questions