Загрузка HTML элементов из шаблона в отдельный файл с jQuery - PullRequest
Новая
       1

Загрузка HTML элементов из шаблона в отдельный файл с jQuery

4 голосов
/ 24 февраля 2020

Я хочу создать веб-страницу, загрузив HTML элементов из отдельного файла, используя jQuery.

У меня есть файлы:

index. html

   <!DOCTYPE html>
   <html lang="en">
   <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   </head>
   <body>
     <script src="app.js"></script>
   </body>
   </html>

приложение. js

$.get("template.html",function(data) {
    let a = $(data).contents().clone()
    let b = a.find("#par1")
    a.html()
    $("body").append(b)   
 })

шаблон. html

<template>       
    <div>
      <p id="par1">apple</p>
      <p id="par2">banana</p>
    </div>    
</template>

Когда я загружаю index. html, par1 из template. html загружается в тело, и отображается слово apple. Это то, что я хочу, но я не могу понять, зачем мне нужна строка «a. html ()» в приложении. js. Если я закомментирую это, я получаю сообщение об ошибке: «Uncaught TypeError: Невозможно прочитать свойство« содержит »нулевого значения» в строке с $("body").append(b). Что здесь происходит?

Ответы [ 2 ]

2 голосов
/ 24 февраля 2020

Помимо того, что правильно и что плохо в вашем коде, здесь объясняется, что происходит в вашем коде.

Возникшая ошибка связана с добавлением элемента DOM none к телу HTML, поэтому, если вы console.log(b, typeof b) зарегистрирует следующее: 

k.fn.init [p#par1, prevObject: k.fn.init(3)] "object"

здесь происходит то, что ваш код let a = $(data).contents().clone(); создаст javascript объектный массив из ваших тегов HTML и назначит его переменной a, затем вы держите ссылку на элемент массива, в котором он имеет идентификатор par1. и это по-прежнему javascript Object, поэтому при вызове a. html () он преобразует все элементы a в текст и DOM, а переменная b содержит ссылку на один из них. из этих HTML элементов, поэтому вашему коду необходим. html (), или вы также можете получить его следующим образом: 

$.get("template.html",function(data) {
    let a = $(data).contents().clone();
    let b = a.find("#par1")
    $("body").append(b.html())   
 })
0 голосов
/ 24 февраля 2020

Вы уверены, что a.html() это не тот, который отображает "яблоко" на теле?

Я попробовал это здесь: https://codepen.io/BenKennish/pen/BtwEn

И $(data).contents().clone(), кажется, не работает (поэтому, b пусто). $(data).clone() с другой стороны работает.

У меня нет четкого ответа на ваш вопрос, кроме того, что список, который возвращает contents(), вероятно, не является чем-то, что вы можете find() включить.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...