What is jQuery for Document.createElementNS()?

Question

function emleGraphicToSvg(aGraphicNode) {
  var lu = function luf(aPrefix){
    switch (aPrefix){
      case 'xhtml': return 'http://www.w3.org/1999/xhtml';
      case 'math':  return 'http://www.w3.org/1998/Math/MathML';
      case 'svg':   return 'http://www.w3.org/2000/svg';
      }
    return '';
    };
  var svg = document.evaluate("svg:svg",
    aGraphicNode, lu, XPathResult.FIRST_ORDERED_NODE_TYPE, null).
    singleNodeValue;
  $(svg).children().remove();
  rect = document.createElementNS(lu('svg'), "rect");
  rect.setAttribute("x", "35");
  rect.setAttribute("y", "25");
  rect.setAttribute("width", "200");
  rect.setAttribute("height", "50");
  rect.setAttribute("class", "emleGraphicOutline");
  svg.appendChild(rect);
  }

The code is a simplified fragment from Emle - Electronic Mathematics Laboratory Equipment JavaScript file emle_lab.js.

The Look-Up-Function, luf(), maps a complete reference to a shorten name for the namespace in the XPath string and createElementNS(). The existing svg:svg is located, removed and replaced by a new rectangle.

I also need to know what does createElementNS() do. Here is my related question in svg-edit: http://code.google.com/p/svg-edit/issues/detail?id=574 — marknt15, Jul 07 '10 at 05:02

score 5 · Answer 1 · answered Jun 21 '17 at 00:25

What is jQuery for Document.createElementNS()?

That would be:

$(document.createElementNS('namespace', 'tag'))

So in the OP's case:

rect = $(document.createElementNS(lu('svg'), 'rect'))
    .addClass('emleGraphicOutline')
    .attr({
        x: 35,
        y: 25,
        width: 200,
        height: 50
    });

But not much is really gained by using jQuery for that, of course. In any case, one can always wrap DOM nodes in jQuery with e.g. $(rect) after creating rect with vanilla JS.

Note that jQuery has other issues with SVG, such as breaking viewBox due to lowercasing attributes, so plain JS must still be used for some attributes.

score 2 · Answer 2 · answered Apr 03 '10 at 19:10

2

For SVG, I have used Keith Wood's jquery.svg for some evaluation type projects.

answered Apr 03 '10 at 19:10

ndim

35,870
12
47
57

3

The svg is just an example. I assume jquery.svg is not for handling namespaces other than svg. I am looking for how to handle namespaces with Jquery, specifically createElementNS(). – CW Holeman II Apr 07 '10 at 00:43
@C.W.HolemanII I haven't found a good way to do this yet, though you can always get work around jquery and use createElementNS() and setAttributeNS() yourself, like this: http://www.benknowscode.com/2012/09/using-svg-elements-with-jquery_6812.html – Daniel Kinsman Jan 14 '14 at 04:46

What is jQuery for Document.createElementNS()?

2 Answers2

Linked