What is jQuery for Document.createElementNS()?

Question

What is jQuery for Document.createElementNS()?

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.

Answer 1

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.

Answer 2

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