CODEWITHSUNDEEP
jqueryappend
Caspert
Caspert

Reputation: 4363

How to append self-enclosing tag with jQuery?

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 methods 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 below will create the following result:

<circle></circle>

What can I try next?

Upvotes: 0

Views: 792

Answers (3)

Frank Etoundi
Frank Etoundi

Reputation: 356

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>

Upvotes: 0

Pebbl
Pebbl

Reputation: 36005

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.

Upvotes: 0

Rohit Kumar
Rohit Kumar

Reputation: 1958

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

Upvotes: 1

Related Questions