在附加到DOM之前操作html

manipulate html before append to DOM

本文关键字：操作 html DOM      更新时间：2023-09-26

$(document).ready(function(){
  var x = '<div><span></span><div id="container"><span>one</span><span class="target"></span></div></div>';
  console.log($(x).find('#container').get(0));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我可以得到容器块，但如何删除.target span？

如果class与.target匹配，是否要删除整个元素？试试这个：

$(document).ready(function(){
    var x = $('<div><span></span><div id="container"><span>one</span><span class="target"></span></div></div>');
    x.find('.target').get(0).remove();
    console.log(x.html());
});

这是一把小提琴。

编辑

由于x.html()去掉了根元素（即<div></div>），如果您想获得完整的HTML字符串，下面是解决方案。

$(document).ready(function(){
    var x = $('<div><span></span><div id="container"><span>one</span><span class="target"></span></div></div>');
    x.find('.target').get(0).remove();
    x = x.wrap('<div>').parent().html();
    console.log(x);
});

更新的小提琴。

编辑2

在有多个.target的情况下，例如说以下字符串：

<div><span></span><div id="container"><span>one</span><span class="target"></span><span class="target"></span><i class="target"></i></div></div>

您可以考虑删除get(0)。

$(document).ready(function(){
    var x = $('<div><span></span><div id="container"><span>one</span><span class="target"></span><span class="target"></span><i class="target"></i></div></div>');
    x.find('.target').remove();
    x = x.wrap('<div>').parent().html();
    console.log(x);
});

再次更新小提琴。

尝试以下操作：

$(x).find(".target").remove();

你可以试试这个

$（x）.fund（"span.target"）；

请参阅下文。

FYI--目标类的元素内部没有跨度。。。所以做".目标跨度"有点没有意义

var x = '<div><span></span><div id="container"><span>one</span><span class="target"></span></div></div>';
var elem = $(x).find("#container").parent();
elem.find('.target').remove();

尝试：

var x = '<div><span></span><div id="container"><span>one</span><span class="target"></span></div></div>';
var elem = $(x).find("#container").parent();
elem.find('.target').remove();
var div = $('<div>').append(elem).html();
console.log(div);

http://jsfiddle.net/8dh3bze7/

这应该有效：

 $(document).ready(function() {
  var x = '<div><span></span><div id="container"><span>one</span><span id="target">ssss</span></div></div>';
  var y = $(x).find("#target").remove().text();
  //$(x).find(".target").remove();
    $('#new').append( "<p>Test</p>" + y);
});
相关文章：