Comment innerHTML un tag HTML sans identifiant?

Question

Par exemple, j'ai ce code HTML:

<div id="canvas"> 
    <div id="root"> 
     <div id="content"> 
      <span> 
       <title>My SVG Example Title</title> 
       <ellipse id="svg_1" /> 
      </span> 
     </div> 
    </div> 
</div> 

Comment puis-je innerHTML la balise <span> sans changer l'étiquette <title> utilisant jQuery? Donc, mon résultat attendu serait quelque chose comme ceci:

<div id="canvas"> 
    <div id="root"> 
     <div id="content"> 
      <span> 
       <title>My SVG Example Title</title> 
       <input type="text" value="this is the innerHTML I must insert but how?" /> 
      </span> 
     </div> 
    </div> 
</div> 

Answer 1

$('#canvas') 
.find('span') 
.contents() 
.not('title') 
.replaceWith($('<input />', { 
    type: 'text', 
    value: 'this is the innerHTML I must insert but how?' 
})); 

Answer 2

Retirez l'élément ellipse et ajoutez votre élément input:

$("#content span ellipse").remove() 
var input = $("<input>").attr("type", "text").attr("value", "foo"); 
$("#content span").append(input); 

Answer 3

je ferais ceci:

var newHtml = '<input type="text" value="NewStuff!" />'; 

$("#svg_1").after(newHtml).remove();