如何使用无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>

我如何在不使用jQuery更改<title>标签的情况下对<span>标签进行innerHTML处理？ 所以我的预期输出将是这样的：

<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

我会这样做：

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

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

Answer 3

删除ellipse元素，然后添加input元素：

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