How Do I Change an <svg> Tag To An <img> Tag with js?

Question

I'm writing a chrome extension to change a certain website's logo for a friend. The problem is that the logo is an <svg> tag. How do I change the HTML tag and content in js?

Answer 1

Not sure if you are allowed to use jQuery, but you could use replaceWith() ;

 $(document).ready(function(e) { $('svg').replaceWith('<img src="http://images.all-free-download.com/images/graphiclarge/smiley_10_55841.jpg" alt="smiley!"/>'); }); 

 svg { width: 200px; height:200px; } img { width: 200px; height: 200px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#a23"/> <text x="50" y="68" font-size="48" fill="#FFF" text-anchor="middle"><![CDATA[410]]></text> </svg> </div> 

If you can only use JavaScript, there is a replaceChild function.