javascript - 如何innerHTML一个没有id的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 <span>标签而不改变 <title>使用 jQuery 标记？所以我的预期输出将是这样的:

<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?'
 }));