Question

有人可以告诉我在将html插入文档之前如何修改html？

这是一个AJAX电话：

url: "http://localhost/cart/public/admin/album",
success: function(html) {

这是AJAX调用的结果：

<div class="main-content slide-in">
    <h1>Create Album</h1>
    <div class="inner">
    </div>
</div>

我想要做的就是更改h1标签的颜色。我添加了此代码

url: "http://localhost/cart/public/admin/album",
success: function(html) {
    $(html).find('h1').css('color','red');
    $('aside').after(html);

然而这没有效果。 jQuery选择器似乎确实在工作。

url: "http://localhost/cart/public/admin/album",
success: function(html) {
    $(html).find('h1').css('color','red');
    console.log($(html).find('h1').length);
    $('aside').after(html);

使用console.log正确的输出1.所以它找到了h1。出于某种原因，虽然没有应用css样式。

我有点卡住了。我错过了一步吗？

Answer 1

看起来您正在更改颜色，然后将未更改的字符串添加到DOM。试试这个：

success: function(html) {
    var $html = $(html);
    $html.find('h1').css('color','red');
    $('aside').after($html);

Answer 2

这里接受的答案实际上浪费了我很多时间。至少它不是通用的。这是经过一段时间后才发现的。

$.ajax({
  url: "http://localhost/~yoelusa/the-url-of-your-string.html",
  success: function(htmldata) {
    var $html = $("<div/>").append( htmldata );
    // make your changes on the html string, see some example bellow relevant to my htmlstring
    $html.find('#left').html("");
    $html.find('#right').html("");
    $html.find('.commentlist').remove();
    // when you are ready to insert your string somewhere call the html() function, in my example I inserted it in an iframe
    $("iframe").attr("srcdoc", $html.html() );
  }
});

Answer 3

试试这个：

$(html).find('h1').css('color', 'red').parent().insertAfter('aside');

Answer 4

尝试将!important添加到css样式：

$(html).find('h1').css("color", "red !important");

jQuery - 修改HTML字符串

4 个答案: