All geek questions in one place

JQuery append replace img image

So, I generate svg, and in svg there are <image> tags, but whenever I add an <image> , it is replaced with <img>

http://jsfiddle.net/d4s4p3az/

 $('body').prepend('<image></image><br>'); $('body').append('img tags: '+$('body').children('img').length+'<br>'); $('body').append('image tags: '+$('body').children('image').length);

What's up with that.

Is this a jQuery thing? I tried it in chrome and safari with the same results.

Edit:

This function has been completed to add svg code to svg, where the first argument is the jQuery object for svg and the second argument is the svg code to add.

 function appendToSVG(svg,text){ text = svg.html()+text; attributes = svg[0].attributes; var attrs = ''; for (var i=0; i <= attributes.length-1; i++){ attrs += attributes[i].name+'="'+attributes[i].value+'" '; } svg.after('<svg '+attrs+'>'+text+'</svg>'); svg.remove(); }
+6
source share
3 answers

There is no image element in HTML, neither in HTML5 nor HTML4 . I expect browsers to just cope with a common error.

image is an SVG element , so you cannot directly place it in the body , it must be in the SVG context. For example: Updated script

 $('body').prepend('<svg><image></image></svg><br>'); $('body').append('img tags: '+$('body').find('img').length+'<br>'); $('body').append('image tags: '+$('body').find('image').length);

... which gives us:

  img tags: 0
 image tags: 1
+2
source

In your case, when you do:

 $('body').prepend('<image></image>');

jQuery will try to convert the string you are trying to add to the dom element before adding it, but the image is not an official tag ( http://www.w3.org/TR/html5/ ), so your browser will create the tag because it thought it was what you want

To force the browser to create the tag that you want, you must tell jQuery that you want to use a special tag using this code:

 var $image = $('<image>'); $('body').prepend($image);

this is normal for a browser that allows you to create custom html elements such as chrome and firefox, but it doesn’t work in IE, look at this updated fiddle (I’ll tell you “image tags 1” in chrome, but still “image tags" 0 " in IE):

http://jsfiddle.net/d4s4p3az/1/

So the solution is to create a w3c matching tag using the svg image namespace:

 <html> <head> <script src="http://code.jquery.com/jquery-2.1.1.js"></script> </head> <body> <script> $(document).ready(function onDomLoad() { $('svg').append('<image>'); $('svg').append($('<image>')); var svg = document.createElementNS('http://www.w3.org/2000/svg', 'image'); $('svg').append(svg); $('body').append('img tags: '+$('svg').children('img').length+'<br>'); $('body').append('image tags: '+$('svg').children('image').length); }); </script> </body> </html>

Here is the fiddle:

http://jsfiddle.net/d4s4p3az/11/

A good article on manipulating SVG images using javascript can be found here: http://www.sitepoint.com/surviving-the-zombie-apocalypse-manipulating-svg-with-javascript/

Perhaps in your case it would be useful to use a javascript library like svg.js: http://www.svgjs.com/

+1
source

I think by creating a jQuery selector you can do this:

 var image = $('<image></image>'); $('body').prepend(image);
-1
source

Source: https://habr.com/ru/post/973893/

More articles:


All Articles