Как я могу изменить текст внутри модального с помощью jquery?

Question

Привет, ребята. Я попытался создать pokedex с помощью pokeapi. Мой модал выглядит так:

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLongTitle"> #1 Pokemon-Name</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      Some information
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    </div>
  </div>
</div>

и JS, как это:

const button = document.createElement("BUTTON");
button.setAttribute("data-toggle","modal");
button.setAttribute("data-target","#exampleModalCenter");

И мой вопрос, как я могу изменить название и описание модального на бульбазаур?

Полный код: https://www.codeply.com/go/qoCnPUDDxG

Answer 1

с простым JavaScript:

document.getElementById('exampleModalLongTitle').textContent = 'Bulbasaur';

С помощью jQuery:

$('#exampleModalLongTitle').html("Bulbasaur");

Сделайте то же самое для любого элемента, содержащего ваше описание.

Answer 2

вы можете получить ссылку на div, используя идентификатор и установить содержимое внутри него.

//In Jquery
$('#exampleModalLongTitle').html("your text");

//In js
document.getElementById('exampleModalLongTitle').textContent = 'you text';

Answer 3

Для модального заголовка:

document.getElementById("exampleModalLongTitle").innerHTML="bulbasaur"; //pure JS
$("#exampleModalLongTitle").html("bulbasaur") //with Jquery

Для описания добавьте атрибут id к вашему элементу HTML

<div id="modalDescription" class="modal-body">
      Some information
</div>

document.getElementById("modalDescription").innerHTML="bulbasaur description"; // pure JS
$("#modalDescription").html("bulbasaur description") //with Jquery