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

Question

我有一个问题，你能告诉我如何完全删除当前的div内容并使用jQuery替换为最新的内容吗？我尝试了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);

这也允许您使用类名'program-wrapper'将新HTML附加到div的底部。

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