jQuery克隆节点错误答案

【问题标题】：jQuery clone node errorjQuery克隆节点错误
【发布时间】：2014-05-30 04:45:48
【问题描述】：

我必须检查“p”元素是否包含一些文本，如果是，则创建另一个元素“span”，然后克隆“p”元素并将其附加并替换为“span”元素。但是我收到以下错误：

未捕获的 NotFoundError：无法在“节点”上执行“appendChild”：新的子元素为空。

这是我的代码：

if ($("p:contains('computer forensics is')")) {
            var highlight = document.createElement('span');
            highlight.className = 'highlight';
            highlight.style.backgroundColor = "red";
            highlight.id = "";
            highlight.setAttribute("title", "");
            var node = $("p:contains('computer forensics is')");
            var wordClone = node.clone(true);
            highlight.appendChild(wordClone);
            node.parentNode.replaceChild(highlight, node);
        }

【问题讨论】：

考虑正确混合使用 jQuery 和纯 JavaScript 方法。
正如VisioN 建议的那样，如果你打算使用jQuery，不妨将它用于它支持的所有东西。 jQuery 代码通常比原始 JavaScript 更小（并且更兼容跨浏览器）。
只要使用 jQuery 就可以了，而且会丢失相当多的代码行。如果你想同时使用 jquery 节点前缀 a $ 这样很容易跟踪普通节点上的 jquery 实例。
另外，你的if 子句没有意义，因为检查元素是否存在应该使用$(...).length > 0 条件。
我很确定 spans 并不意味着在有效的 HTML 中包含 paragraphs。 span 只是您需要在段落或 div 中设置样式的一系列字符。

标签： javascript jquery dom

【解决方案1】：

制作这条线：

var wordClone = node.clone(true);

进入这个：

var wordClone = node.clone(true)[0]; // now it is HTMLElement

您将 jQuery 对象与本机元素混合在一起。

我也不知道为什么你会不在 jQuery 可用时使用它。

你可以在 jQuery 中重写大部分的东西：

if ($("p:contains('computer forensics is')").length) {
    var highlight = $('<span/>', {
        "class": "higlight",
        style: "background-color:red;"
    });
    var node = $("p:contains('computer forensics is')");
    var wordClone = node.clone(true);
    highlight.append(wordClone);
    node[0].parentNode.replaceChild(highlight, node);
}

【讨论】：

现在的问题：未捕获的类型错误：无法读取未定义的属性'replaceChild' 感谢您的帮助@Amit
@TrueBlueAussie，是的！更新
您是否注意到原始代码似乎对父母和孩子做了一些很奇怪的事情？它向后看。真的需要一个 JSFiddle :)
运气不好不工作，实际上没有错误但仍然没有附加span元素@Amit
@ronish，查看您的评论上方的评论

【解决方案2】：

您不能在跨度中包含段落（无效的 HTML()），但假设您希望在段落中使用跨度：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/Kw3tj/2/

$(function () {
    var $node = $("p:contains('computer forensics is')");
    if ($node.length) {
        var $highlight = $('<span/>', {
            "class": "highlight", 
            style: "background-color: red"
        });
        $highlight.html($node.html());
        $node.empty().append($highlight);
    }
});

【讨论】：

【解决方案3】：

^{注意：如果要定位的文本的部分包含在其他 HTML 元素中，例如：
computer forensics is}

您只需要突出显示某些特定的文本部分？
创建自己的微插件：

jsBin demo

$.fn.highlight = function(word){
  return this.each(function(){
    var span = $('<span />', {
      'class' : "",
      'html'  : word,
      'id'    : "",
      'title' : "",
      'style' : "color:white; background:red"
    }),
        $el = $(this),
        reg = new RegExp(word, 'ig');
    $el.html($el.html().replace(reg, span.prop('outerHTML')));
  });
};

// ///////
// USE EXAMPLE:

$('p').highlight('computer forensics is');

【讨论】：

谢谢你，我也做了同样的事情，但现在的问题是，当文本包含一些粗体或斜体字符时，突出显示会中断。例如：That's why computer forensics is awesome，计算机取证没有得到高亮
@ronish 你的问题比你想象的要大一点......这里还有其他关于正确突出显示包含内部元素的文本的答案。