Метод jQuery .text () не работает для изменения элементов абзаца html встроенных файлов html

Question

Я разрабатываю веб-страницу для отображения информации о растениях. Каждое растение содержится в собственной «карточке растения». Теперь общая идея состоит в том, чтобы иметь единое html-определение для карточек растений (PlantCard.html), которое затем загружается в различные div на главной странице с помощью jQuery, чтобы избежать повторения кода. Затем, чтобы все эти карты растений действительно отображали различную информацию, мне нужно изменить элементы внутри PlantCard.html.

jsfiddle: https://jsfiddle.net/King_Fish/nxv3jtz5/2/

Теперь первоначальная проблема заключается визмените название завода, что следует сделать, изменив значение абзаца с идентификатором plant_name внутри div класса plantcard_name (этот код находится в пределах PlantCard.html, страницы, которая встроена в Main.htmlpage):

<div class="plantcard_name">
    <p id="plant_name">Pepperomia</p>
</div>

В настоящее время страница PlantCard.html загружается в три различных блока с идентификаторами: test, test1 и test2 (внутри Main.html). Затем при попытке запросить абзац (plant_name) определенного div, скажем, с идентификатором test и изменением его текста методом text(String text), ничего не происходит. :

$("#test").find('.plant_name').text("Changed text");

Чтобы проверить, работает ли функция text (String text), я создал тестовый абзац внутри Main.html, а затем попытался получить его ссылку из файла javascript и изменить его текст, что было успешно. :

(это определение абзаца в Main.html):

<p id="testParagraph">Test to change here!</p>

(это JavaScript)

$(document).ready(function() {
 loadPlantCards();

 $("#testParagraph").text("New text");
});

Я считаю, что text(String text)метод был успешным, поскольку во втором подходе запрошенный абзац уже был внутри Main.html, тогда как абзац plant_name - это абзац, содержащийся во внешнем html-файле, который затем загружается в основной файл. Как сделать так, чтобы текстовый метод также работал с абзацами из внешних html-файлов?

Редактировать: Для проверки типовЗапрошенные элементы, я добавил некоторый код, чтобы найти тип testParagraph и все три различных запрашиваемых абзаца класса plant_name.

Это текущий $(document).ready(function() { ... } метод:

$(document).ready(function() {
 loadPlantCards();

 $("#testParagraph").text("New text");

 if($("#testParagraph").is("p")) {
   console.log("Testpara is of type p");
 } else {
   console.log("Testpara is not of type p");
 }
});

Теперь последний оператор if проверяет, имеет ли найденный элемент с идентификатором testParagraph тип p (<p>). При загрузке страницы это утверждение оценивается как истинное, как и ожидалось.

Затем, однако, я также выполнил ту же проверку элементов, которые запрашиваются методом $(plantCardIds[i]).find(".plant_name"). Я обнаружил, что ни один из трех элементов не относится к типу p (<p>) ... Следовательно, запрашиваемые элементы не являются абзацами !? Почему это так?

Эта проверка используется для последних элементов внутри цикла foor:

    for(i = 0; i < plantInfo.length; i++) {
    $(plantCardIds[i]).load("PlantCard.html", null, function(responseTxt, statusTxt, xhr) {
      if(statusTxt == "success") {
        console.log("External content loaded successfully; i=" + i);
      }

      if(statusTxt == "error") {
        console.log("Error: " + xhr.status + " | " + xhr.statusTxt);
      }
      //TODO: find a way to change the plant names... you need to access plant_name inside PlantCard!

      var plantNameTextView = $(plantCardIds[i]).find(".plant_name");
      console.log("plantNameTextView = " + plantNameTextView);
      //plantNameTextView.text(plantInfo[i].plantName);

      if(plantNameTextView.is("p")) {
        console.log("plantNameTextView is of type p");
      } else {
        console.log("plantNameTextView is not of type p");
      }
    });
  }