How to innerHTML an HTML tag without id?

Question

Hi,

For example I have this HTML code:

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

How can I innerHTML the <span> tag without changing the <title> tag using jQuery? So my expected output would be something like this:

<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

Remove the ellipse element and add your input element:

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

Answer 2

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

Answer 3

I would do this:

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

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