Как отделить список поиска HTML и дать ссылку на исходный код? [дубликат] ⇐ CSS

[Гость]

Я новичок в HTML, CSS и JS. Я пытался учиться на w3schools.com и наткнулся на «Как сделать — список фильтров/поиска» (https://www.w3schools.com/howto/howto_j ... _lists.asp). Я хотел бы знать, как разместить список имен в

• в виде отдельного HTML-файла с именем data.html и как связать его обратно с исходным HTML, чтобы он работает точно так же, но с отдельным data.html? Ниже приведен весь пример кода с сайта w3schools.com. Я ценю все советы.
  
  * { размер коробки: граница-коробка; } #myInput { фоновое изображение: URL('/css/searchicon.png'); позиция фона: 10 пикселей 12 пикселей; фоновый повтор: без повтора; ширина: 100%; размер шрифта: 16 пикселей; отступы: 12 пикселей 20 пикселей 12 пикселей 40 пикселей; граница: 1 пиксель, сплошная #ddd; поле внизу: 12 пикселей; } #myUL { тип стиля списка: нет; заполнение: 0; маржа: 0; } #myUL ли а { граница: 1 пиксель, сплошная #ddd; маржа-верх: -1px; /* Предотвращение двойных границ */ цвет фона: #f6f6f6; отступ: 12 пикселей; текстовое оформление: нет; размер шрифта: 18 пикселей; черный цвет; дисплей: блок } #myUL li a:hover:not(.header) { цвет фона: #eee; } Моя телефонная книга
• Адель
• Агнес
• Билли
• Боб
• Кельвин
• Кристина
• Синди

функция myFunction() { var input, filter, ul, li, a, i, txtValue; input = document.getElementById("myInput"); фильтр = input.value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName("li"); для (я = 0; я -1) { li.style.display = ""; } еще { li.style.display = "нет"; } } } Я хотел бы знать, как поместить список имен в в виде отдельного html-файла с именем data.html и как связать его обратно с исходным html, чтобы он работал точно так же, но с отдельным data.html?