#javascript #html
Вопрос:
У меня есть вопрос о разработке HTML/JS.
Итак, у меня есть элемент, представляющий раздел, содержащий некоторые данные, такие как название работы, локализация.
Эти данные взяты из таблицы SQL, которая содержит некоторые объявления о вакансиях.
Поэтому мой вопрос в том, как я могу дублировать этот раздел для каждого объявления о вакансии, переписывая раздел каждый раз, когда я вызываю новые данные из своей базы данных.
я надеюсь, что это было ясно
Вы можете увидеть здесь мой HTML-код.
<div class="container">
<div class="row">
<div class="col-sm">
<section class="py-5">
<div class="container px-4 px-lg-5 mt-5">
<div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
<div class="col mb-5">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">
<div id="table-container"></div>
</h5>
<!-- Product price-->
</div>
</div>
<div class="dropdown">
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center dropbtn"><a class="btn btn-outline-dark mt-auto" href="#" onclick="display_h()">Learn More</a></div>
<div class="dropdown-content">
<a href="#">Description</a>
<a href="#">Adresse</a>
<a href="./form.html">Apply</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
Спасибо
Комментарии:
1. Шаблонные движки ?
2. Используется
<template>
для определения общей структуры. Затем просмотрите результаты запроса к базе данных, клонировав шаблон и заполнив детали.3. Большое спасибо!
Ответ №1:
Вы можете использовать cloneNode. Из документов
let p = document.getElementById("para1")
let p_prime = p.cloneNode(true)
Комментарии:
1. Спасибо. Я попробовал ваши методы, и они работают для дублирования моих HTML-элементов. К сожалению, информация из базы данных не распространяется на клонированные элементы. У тебя есть идея ?
2. Ну, это совсем другое дело. Я не знаю, как отображается ваш код. Если бы я делал это, например, в React, мне пришлось бы ждать, пока мой компонент завершит «компоновку», чтобы все было доступно в DOM. Но похоже, что вы на самом деле не пытаетесь клонировать/копировать элемент, а просто предоставляете шаблон для заполнения данными. Как правило, для этого требуется какой-то фреймворк или пакет шаблонов.