javascript - 用新元素包装一部分innerHTML

Question

关闭。这个问题需要debugging details .它目前不接受答案。












想改进这个问题？将问题更新为 on-topic对于堆栈溢出。

去年关闭。




Improve this question




这是论坛上的 HTML:

<div class="sign">username <span class="info">info</span></div>

这是我需要使用用户脚本更改它的方法:

<div class="sign"><a itemprop="creator">username</a> <span class="info">info</span></div>

我知道如何创建 a元素，为其分配一个自定义属性，并将其添加到 DOM。
但我不明白如何包装 username用它。即如何转换 username从第一个示例到 <a itemprop="creator">username</a>在第二个例子中。
编辑:一个 a元素将有 href也是。我故意省略了它以使代码更短。

Answer 1

使用 vanilla DOM API 执行此操作有点复杂，但并不难。您需要找到包含要替换的片段的 DOM 文本节点，将其分成三部分，然后将中间部分替换为您想要的节点。
如果你有一个文本节点 textNode并想要替换索引 i 中的文本索引 j由 replacer 计算的节点，您可以使用此功能:

function spliceTextNode(textNode, i, j, replacer) {
    const parent = textNode.parentNode;
    const after = textNode.splitText(j);
    const middle = i ? textNode.splitText(i) : textNode;
    middle.remove();
    parent.insertBefore(replacer(middle), after);
}

调整您的示例，您将不得不像这样使用它:

function spliceTextNode(textNode, i, j, replacer) {
    const parent = textNode.parentNode;
    const after = textNode.splitText(j);
    const middle = i ? textNode.splitText(i) : textNode;
    middle.remove();
    parent.insertBefore(replacer(middle), after);
}

document.getElementById('inject').addEventListener('click', () => { 
    const textNode = document.querySelector('div.sign').firstChild;
    const m = /\w+/.exec(textNode.data);
    spliceTextNode(textNode, m.index, m.index + m[0].length, node => {
        const a = document.createElement('a');
        a.itemprop = 'creator';
        a.href = 'https://example.com/';
        a.title = "The hottest examples on the Web!";
        a.appendChild(node);
        return a;
    })
}, false);

/* this is to demonstrate other nodes underneath the <div> are untouched */
document.querySelector('.info').addEventListener('click', (ev) => {
    ev.preventDefault();
    alert('hello');
}, false);

<div class="sign">@username: haha, <a href="http://example.org" class="info">click me too</a></div>

<p> <input id="inject" type="button" value="inject link">

请注意，在注入(inject)“用户名”链接后，“也单击我”处理程序如何仍附加到该链接；修改 innerHTML将无法保留这一点。