如何在沒有id的情況下使用innerHTML HTML標籤？

Question

比如我有這樣的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> 

我怎麼能innerHTML的不改變使用jQuery的<title>標籤<span>標籤？ 所以我預計產出將是這樣的：

<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

取出ellipse元素，並添加您的input元素：

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

Answer 3

我這樣做：

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

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