Question

我有一个问题，请告诉我如何使用jQuery完全删除当前div内容并将其替换为最新内容？我尝试了replaceWith，Empty（），Remove（），Html，但这些都不起作用。

这是我的代码，我要做的是加载运行ajax响应中的内容所需的“ js脚本”。它按我的预期工作，但仅适用于第一组结果。例如：如果我第一次单击loademore按钮，它将一次加载所需的脚本。但是，如果我再次单击它，那么它将开始再次加载js脚本，而不用替换当前脚本。因此，当我单击任何按钮时，它将保持运行2次。

$("#loadMore").on('click', function(e) {
  e.preventDefault();
  $.ajax({
    method: 'GET',
    url: baseUrl + 'ajaxcontroller/Load_Categories_To_View',
    success: function(data) {
      $('#searchResults').append(data);
      $('#scripts').empty();
      checkloadjscssfile(baseUrl + 'assets/js/comparison/jquery.comparison.js', 'js');
      checkloadjscssfile(baseUrl + 'assets/js/comparison/animatedModal.min.js', 'js');
      checkloadjscssfile(baseUrl + 'assets/js/comparison/comp.js', 'js');
      $('#loadingImage2').hide();
    },
    complete: function() {
      $('#loadingImage2').hide();
      $("#loadMore").show();
    },
    error: function(xhr, ajaxOptions, thrownError) {
      alert(thrownError);
    }
  });
});

function loadjscssfile(filename, filetype) {
  if (filetype == "js") { //if filename is a external JavaScript file
    var fileref = document.createElement('script');
    fileref.setAttribute("type", "text/javascript");
    fileref.setAttribute("src", filename);
    console.log(fileref);
    $('#scriptsLazy').remove();
    $('#scriptsLazy').replaceWith(fileref);
  } else if (filetype == "css") { //if filename is an external CSS file
    var fileref = document.createElement("link");
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", filename);
  }
  if (typeof fileref != "undefined") {
    document.getElementsByTagName("head")[0].appendChild(fileref);
  }
}

function checkloadjscssfile(filename, filetype) {
  if (filesadded.indexOf("[" + filename + "]") == -1) {
    loadjscssfile(filename, filetype);
    filesadded += "[" + filename + "]"; //List of files added in the form "[filename1],[filename2],etc"
  } else {
    loadjscssfile(filename, filetype);
    //$('#scripts').refresh();
    //alert('unsuc');
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

HTML：

<div class="program-wrapper">
    Hello there!
</div>

jQuery：

$('.program-wrapper').text('new string');

它将用新的文本替换您以前的文本。

$('.program-wrapper').html('new html');

例如：$('.program-wrapper').html('<p> What are you doing? </p>');

它将用新的html替换您以前的文本。

var ht = $('.program-wrapper').html();
var newHt = ht + '<p>What are you doing?</p>';
$('.program-wrapper').html(newHt);

这将在您之前的html的末尾添加新的html。

var newHt = ht + '<p> What are you doing? </p>';
$('.program-wrapper').append(newHt);

这还将使您可以在div底部以类名'program-wrapper'附加新的HTML。

Answer 2

“使用jQuery完全删除和替换Div内容”

只需删除html并再次分配就可以了

希望在快照下方有帮助

(function(){
  var x = true
  setInterval(function(){
    if(x){
      $('#xesloohc').html('')
    }else{
      $('#xesloohc').html('#GOD #XESLOOHC')
    }
    x=!x
  },3000)
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="god">
  <div id="xesloohc">
    #GOD #XESLOOHC
  </div>
</div>

Answer 3

在这里，我附加了一个链接，该链接可以显示完全删除当前div内容并使用jQuery将其替换为最新内容的演示。

Refer link to show the code and demo of it

使用jQuery完全删除和替换Div内容

3 个答案:

HTML：

jQuery：