html created with jquery does not show

Question

I have a HTML file that is partially created with javascript/jQuery:

<!DOCTYPE html>
<html>
  <head>
    <title>with-js</title>
    <script type="text/javascript" src="./scripts/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="./scripts/object.js"></script> 
  </head>
  <body>
    <div id="depiction"></div>
  </body>
</html>

The following script object.js creates additional HTML elements:

jQuery(document).ready(function() {
   var svg = jQuery('<svg height="466" width="1842" ></svg>');
   var g = jQuery('<g transform="translate(400 200)"></g>');
   var t = jQuery('<text text-anchor="middle" x="20" y="26">r1</text>');
   var r = jQuery('<rect class="svg_elem" id="elem_1" width="41px" height="40px"></rect>');
   g.append(t).append(r).appendTo(svg);
   svg.appendTo(jQuery('#depiction'));
});

When I load the HTML file in a browser, the <g> element is not visible. However, I can recover the complete HTML code using an inspector tool and paste it in another file, removing the reference to the JS script:

<!DOCTYPE html>
<html>
  <head>
    <title>without-js</title>
  </head>
  <body>
    <div id="depiction">
      <svg width="1842" height="466">
        <g transform="translate(400 200)">
          <text y="26" x="20" text-anchor="middle">r1</text>
          <rect id="elem_1" class="svg_elem" height="40px" width="41px"></rect>
        </g>
      </svg>
    </div>
  </body>
</html>

Now, the <g> element is shown correctly when the new HTML file is loaded in the browser!

Can anybody explain this to me?

Thanks in advance

try ** $('#depiction').append(g.append(t).append(r).appendTo(svg)) ** ; — Balachandran, Apr 28 '15 at 14:16
Thanks Bala, but still the `` element does not appear; the HTML inspector says that is a 0x19 rectangle, instead of a 41x40 one. — franpena, Apr 28 '15 at 14:25
I mean your code (OP = Original Poster). It does what's it's supposed to, it appends the elements, but they aren't visible, you can read why in the duplicate question. — adeneo, Apr 28 '15 at 14:36
Adeneo, I think you are right: in the question "jquery's append not working with svg element?" you pointed out, Timo claims that including `$("body").html($("body").html());` can solve the problem. A preliminary test confirms this assertion. — franpena, Apr 28 '15 at 14:51

Ruben Kazumov · Answer 1 · 2015-04-28T14:41:32.490

jQuery creates elements with createElement() function, but for SVG you need use createElementNS().

Solutions:

Easy way: Use d3.js library instead jQuery;

Hacker friendly way: Rewrite part of the jQuery code:

enter image description here

// line 526 in jquery-X.X.X.js, in my case it is jquery-1.9.1.js   
// Single tag
if ( parsed ) {
    // ----------------------------------------------------
    var xml_html_element;
    if ( parsed[1] == "svg" || parsed[1] == "path" ) {
        xml_html_element = context.createElementNS( "http://www.w3.org/2000/svg", parsed[1] );
    } else {
        xml_html_element = context.createElement( parsed[1] );
    }
    return [xml_html_element];
    // ----------------------------------------------------
    //return [ context.createElement( parsed[1] ) ];

}

Now, you can use jQuery like:

var $svg = $("<svg>").attr({'version': "1.1"});
var $path = $("<path>").attr({
    'd': 'M' + 10 + ',' + 100 + ' C' + 200 + ',' + 150 + ' ' + 200 + ',' + 170 + ' ' + 300 + ',' + 250,
    'fill': "none",
    'stroke': "rgba(100,100,100,0.9)",
    'stroke-width': "1"
});
var $body = $("body");
$body.append($svg.append($path));

Of course, for your personal necessary you should expand the number of SVG tags in this hack (line 530):

if ( parsed[1] == "svg" 
     || parsed[1] == "g" 
     || parsed[1] == "path" 
     || parsed[1] == "line") {
 ...
}

I think @adeneo is right: in the question [jquery's append not working with svg element?](http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element]). user Timo claims that including `$("body").html($("body").html());` can solve the problem. A preliminary test confirms this assertion. — franpena, Apr 28 '15 at 15:07

html created with jquery does not show

1 Answers1