Javascript, как получить доступ к элементам из HTML-файла, загруженного с помощью jQuery

Question

Меня интересует, как получить доступ к элементам HTML из «внешнего файла HTML», который встроен в «основной файл HTML» (встраивание было выполнено с использованием jQuery) с использованием javascript (который является частью «основного файла HTML»). ).

jsfiddle : https://jsfiddle.net/King_Fish/bfzqjw38/5/

Позвольте мне привести мой пример: у меня есть страница, сохраненная как PlantCard.html (это "внешний HTML-файл). Затем в Main.html («основной файл HTML») я создал 4 div s и загрузил в них PlantCard.html, используя javascript. Это вложение было выполнено следующим образом:

var plantCardIds = ["#test", "#test1", "#test2"];

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

function loadPlantCards() {
  var plantInfo = plantCardsInfoLoader();

  var i;
  for(i = 0; i < plantInfo.length; i++) {
    $(plantCardIds[i]).load("PlantCard.html");

    /*I want to access and change the elements of "PlantCard.html" HERE!*/
  }
}

Функция loadPlantCards() загружает все «карточки растений» (контейнеры с информацией о конкретных растениях) путем перебора массива plantCardIds (содержит идентификаторы div, в которые должен быть загружен PlantCard.html.

Однако я хочу, чтобы на каждой «карточке растения» отображалась различная информация, а также разные изображения растения. Поэтому мне нужно получить доступ к элементам внутри PlantCard.html, и здесь есть проблема. Я пыталсядобейтесь желаемого эффекта следующим образом:

function loadPlantCards() {
  console.log("Loading plants...");

  var plantInfo = plantCardsInfoLoader();

  var i;
  for(i = 0; i < plantInfo.length; i++) {
    $(plantCardIds[i]).load("PlantCard.html");   
$(plantCardIds[i]).getElementById("plant_name").innerHTML=plantInfo[i].plantName;
  }
}

Однако, при использовании этой строки кода ($(plantCardIds[i]).getElementById("plant_name").innerHTML=plantInfo[i].plantName;) для доступа к html внутри соответствующего div, который должен содержать «карту завода», я приветствуюс этим исключением:

Uncaught TypeError: $(...).getElementById is not a function

Теперь я был бы очень рад, если бы кто-то объяснил, как получить доступ к элементам HTML со страницы, которая встроена в div .

Answer 1

.getElementById отлично подходит для этой цели в Vanilla JavaScript, но не является методом в JQuery. Чтобы получить элемент из файла HTML, вы должны вместо этого выполнить:

$(plantCardIds[i]).find('#plant_name')

Это должно работать.