jQuery克隆节点错误

Question

我必须检查一下＆＃39; p＆＃39; element包含一些文本，如果是这样，则创建另一个元素＆span;＆＃39; span＆＃39;然后克隆＆＃39; p＆＃39;元素并附加并替换为＆span;＆＃39; span＆＃39;元件。但是我收到了以下错误：

  

未捕获NotFoundError：无法执行＆＃39; appendChild＆＃39;在＆＃39; Node＆＃39;：The   new子元素为null。

这是我的代码：

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

Answer 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);
}

Answer 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);
    }
});

Answer 3

^{注意：如果要定位的文本包含在其他HTML元素中的部分，则以下代码不起作用：
 computer <i>forensics</i> 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');