javascript - Chrome 扩展(内容脚本)- 在字符串中的特定位置添加按钮

Question

因此，我正在创建一个 Chrome 扩展程序，用于扫描当前页面中的电话号码，并且在找到每个电话号码后，必须创建一个“点击通话”按钮。

当前代码:

var number = foobar,
    queue = [document.body],
    curr;

while (curr = queue.pop()) {
    if (!curr.textContent.match(number)) continue;
    for (var i = 0; i < curr.childNodes.length; ++i) {
        switch (curr.childNodes[i].nodeType) {
            case Node.TEXT_NODE :
                var match = curr.childNodes[i].textContent.match(number);
                if (match) {
                    if(!curr.innerHTML.includes("fa-phone-square")) {
                        var $call_button = $('<i style="margin-left: 5px;" class="fa fa-phone-square" aria-hidden="true" id="'+ match +'"></i>').click(call);
                        $(curr).append($call_button);
                    }
                    break;
                }
                break;
            case Node.ELEMENT_NODE :
                queue.push(curr.childNodes[i]);
                break;
        }
    }
}

现在，这可以工作，但问题是“点击通话”按钮现在放置在找到电话号码的任何元素的末尾，这可能会导致一些奇怪的交互。

示例:

Name: John Doe
Phone: 1234567890
Mail: example@example.com [button]

我想要实现的目标:

Name: John Doe
Phone: 1234567890 [button]
Mail: example@example.com

感谢任何帮助!

Answer 1

尝试改变

$(curr).append($call_button);

至

$(curr.childNodes[i]).after($call_button);