How to append self-enclosing tag with jQuery?

Question

I was wondering how I can create and add an element that is self-enclosing, like the <img src="" /> tag or what I want the <circle cx="" cy"" /> from a SVG element.

UPDATE: When I use the following methodes it will automatically close it with </circle> instead of />.

$('svg').append('<circle>');
$('svg').append('<circle/>');
$('svg').append('<circle />');
$('svg').append('<circle cx="" cy="" />');

All code snippets bellow will create the following result:

<circle></circle>

Look out for some advice. Thank you in advance.

Just like `$('svg').append('');` ? Both self-enclosing and not are valid html though. — Niki van Stein, Oct 13 '15 at 10:14
you can simply create an jquery object `var $circle= $("");` and `$('svg').append($circle)` — Marius Darila, Oct 13 '15 at 10:16
@MariusDarila Also closing the circle with closing tag and not `` — Caspert, Oct 13 '15 at 10:30

Rohit Kumar · Answer 1 · 2015-10-13T10:53:51.513

1

Any type of element is created as same in jquery , however you are saying that it automatically appends closing tag , which may be a not valid one .. Used as below -

$('svg').append('<circle><circle/>');

self-closing

$('svg').append('<circle cx="" cy="" />');

OR BEST WAY TO APPEND SIMPLE AS -

var html ="";
html +="<circle>";
//you in between codes ;
html +="<circle/>";

OR

var html ="";
html +="<circle cx='"+300+"' cy='"+300+"' />";

Finally

$('svg').append(html);
$('body').html($('body').html()); // A trick to refresh to overcome issues

edited Oct 13 '15 at 10:53

answered Oct 13 '15 at 10:17

Rohit Kumar

1,948
1
11
16

Also closing the circle div. Already try it with or or your example above. Sorry for not mentioning. – Caspert Oct 13 '15 at 10:28
@BasvanStein , thanks for your guess , but you are not correct as i taken it form @@OP's question ..By the way , i fix it now.. – Rohit Kumar Oct 13 '15 at 10:31
It gives me the same result als before. – Caspert Oct 13 '15 at 10:34
Hmm not working for me :( Just copy paste one of your `var html` snippets and the final one to add it to my svg. – Caspert Oct 13 '15 at 10:42
@Caspert , since SVG is not similar than div which appends as of inner html .. So have a try to refresh html of page as `$("body").html($("body").html());` after you append it .. more info http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element – Rohit Kumar Oct 13 '15 at 10:51

Pebbl · Answer 2 · 2015-10-14T11:33:34.733

Self closing nature is defined by the namespace, so it will depend heavily on how you are viewing the output of your code. From the perspective of the Dom there isn't any attribute — on a node — that specifies "auto-closing". So if you think about it, this can only be applied when rendering the Dom to a string output, and has to be decided by the renderer.

If you use your modern browser's inspector to view an SVG Element (with correct namespace) you will see that the circle items are displayed as auto-closed. However, with the same set-up (but with incorrect namespace) — not only will your SVG not render — you will see the inspector treats it as HTML. In HTML there is no specification for circle so it will just fallback to the default. Which is properly closed.

correct namespacing

var body = jQuery('body'),
    svg = jQuery(document.createElementNS('http://www.w3.org/2000/svg', 'svg')),
    cir = jQuery(document.createElementNS('http://www.w3.org/2000/svg', 'circle'));
    cir.attr({cx: 30, cy: 30, r: 20, style: 'fill: red;'});
svg.attr({
  viewBox: "0 0 120 120",
  version: "1.1",
  xmlns: "http://www.w3.org/2000/svg"
});
svg.appendTo(body);
svg.append(cir);

incorrect namespacing

var body = jQuery('body'),
    svg = jQuery('<svg>'),
    cir = jQuery('<circle>');
    cir.attr({cx: 30, cy: 30, r: 20, style: 'fill: red;'});
svg.attr({
  viewBox: "0 0 120 120",
  version: "1.1"
});
svg.appendTo(body);
svg.append(cir);

No matter how you set up your Dom however, I can bet you are using some function or attribute that mentions "html" to view the source of your construction. I have found that no matter how well I build my SVG (with correct namespaces), if I use .innerHTML (or jQuery's .html() which is basically the same) the result will be with proper closing tags. That is because you are asking the browser to render it as HTML, so you get the same problem.

I have confirmed the above even using D3 to set up the structure.

console.log(svg.get(0).innerHTML); // <circle></circle>

What you need is .innerSVG or something similar.

The overall question should be however — what are you actually attempting to do. If it is to build something that exports SVG Source correctly, then this might be desired — but I can't think of another reason. Closed or auto-closed makes no difference to the behaviour of the markup itself.

score 0 · Answer 3 · answered Jun 20 '17 at 09:47

To add variables in a self closing, try this.

var image_src = "https://i.imgur.com/nzWpgJ1.jpg"
$(".js-preview").html($('<img />', {src: image_src}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="js-preview"></div>

How to append self-enclosing tag with jQuery?

3 Answers3