Как я могу дублировать раздел html-кода, не переписывая его каждый раз?

#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. Но похоже, что вы на самом деле не пытаетесь клонировать/копировать элемент, а просто предоставляете шаблон для заполнения данными. Как правило, для этого требуется какой-то фреймворк или пакет шаблонов.