Avoid jquery append closing tag

Question

How can I ensure that this:

$('.graph svg').append('<polyline points="' + '3,' +point+ ' 97,' +point+ '"style="fill:none;stroke:#FFFFFF;stroke-width:0.5"/>');

Actually results in a self closing tag ..../>

Rather than closing with </polyline>

For some reason only the former renders on iOS.

When I test in FF it shows the closing tag in the DOM inspector. — Jay Blanchard, Apr 23 '14 at 14:18
This sounds a lot like an X/Y problem, e.g., you're asking for the solution to X, but the real problem is Y. If you can provide an example of code that doesn't work properly on iOS (ideally a [**complete**, self-contained, minimal replicating example](http://sscce.org)), people may be able to help you better. (I'd probably do that in a new question, as this question has already asked the X question rather than the Y question.) — T.J. Crowder, Apr 23 '14 at 14:19
@T.J.Crowder I'll concede that you are entirely correct. It appears that the issue is something other than the format of the closing tag. To rephrase, is there another way of doing this that avoids the append method? Here's a fiddle that refuses to work on iOS http://jsfiddle.net/rCfrF/23/ — OliverJ90, Apr 24 '14 at 08:50
@OliverJ90: That doesn't seem to do anything in Chrome, Firefox, or IE9 either. I've updated my answer with something that works on all of those (and my iPhone 5). I've never done any SVG scripting before, but searching showed me how to do it. — T.J. Crowder, Apr 24 '14 at 09:30
@T.J.Crowder certainly appreciate your time on this. I found an 'easier' if not perfect answer here that may be of interest http://stackoverflow.com/a/13654655/2769095 — OliverJ90, Apr 24 '14 at 19:43

T.J. Crowder · Answer 1 · 2014-04-24T09:30:16.333

It doesn't result in any tags at all; it results in elements in the DOM. Tags are textual means of describing elements. When you give that string to jQuery, it asks the browser to parse that string and create elements (objects) in memory. The only tags involved are the ones you give to jQuery.

From your update (comment):

...is there another way of doing this that avoids the append method? Here's a fiddle that refuses to work on iOS http://jsfiddle.net/rCfrF/23

That doesn't work for me on Chrome, Firefox, or IE either. I don't think you can add to SVG elements like that, I think jQuery tries to create an HTML element polyline rather than the SVG polyline (which is namespaced).

This works on Chrome, Firefox, IE, and my iPhone 5: Updated version of your fiddle on JSBin (jsFiddle doesn't work properly on my iPhone 5)

function clickappend() {
    var svg = $("#graph svg")[0];
    var polyline = svg.ownerDocument.createElementNS('http://www.w3.org/2000/svg', 'polyline');
    polyline.setAttribute("points", "20,0 20,100");
    polyline.style.fill = "none";
    polyline.style.stroke = "#232323";
    polyline.style.strokeWidth = "0.5";
    svg.appendChild(polyline);
    alert('ran');
}

score 1 · Answer 2 · answered Apr 23 '14 at 14:16

1

You could use:

$('.graph svg').html($('.graph svg').html() + '<polyline points="' + '3,' +point+ ' 97,' +point+ '"style="fill:none;stroke:#FFFFFF;stroke-width:0.5"/>');

answered Apr 23 '14 at 14:16

Bob Brinks

1,372
1
10
19

score 0 · Answer 3 · answered Apr 23 '14 at 14:51

This is the inspector's problem. There is a substantial difference between void elements (aka self-closing elements) and others, in that they cannot accept descendant nodes. polyline is such a void element. The inspector may show it as having a closing tag, but it shouldn't be able to accept methods such as – if you tried to insert content between its opening and closing tags that content would likely be inserted after it in the DOM.

Avoid jquery append closing tag

3 Answers3