如何同时显示和更改html内容

Question

我有以下隐藏的引导警报div，我将其设置为显示错误

我想证明这一点，并同时更改其html内容。我尝试了以下将显示errorDisplay的jquery。但这是行不通的。

var errorDisplay = $("#errorDisplay").text();
$("#errorDisplay").html(errorDisplay);
$('#errorDisplay').show();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="alert alert-danger" id="errorDisplay" style="display:none;">
  <strong>Error!</strong>
</div>

Answer 1

将您的ID移至<strong>标记

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="alert alert-danger" style="display:none;">
  <strong id="errorDisplay">Error!</strong>
</div>

无需首先获取错误文本。

$("#errorDisplay").html(errorDisplay);
$('#errorDisplay').show();

或者，您可以将ID保留在原处，并在错误文本中添加<strong>标签

$("#errorDisplay").html(`<strong>${errorDisplay}</strong>`);
$('#errorDisplay').show();

请注意，我将ES6反引号用于错误文本，以便将变量放入字符串中

Answer 2

执行以下步骤：

//1. clear the html inside 
$("#errorDisplay").empty();

//2. a append new html inside it:
$("#errorDisplay").append("you updated html here..");

//3. now show the popup:
$('#errorDisplay').show();