Jquery создает элемент без закрывающего тега

#javascript #jquery #html #dom

#javascript #jquery #HTML #dom

Вопрос:

В моем случае использования мне нужно динамически создать некоторый фрагмент HTML с помощью jquery.

Я начинаю с этой функции:

 function createSection(divName) {
    $("#"  divName).append("<section id='team' class='pb-5'>
        <div class='container'>");    
}

Затем я продолжаю работу с этой функцией:

 function createRow(divName) {
     $("#"  divName).append("<div class='row'>");
}

Затем я добавляю некоторые другие элементы, прежде чем захочу закрыть строку в разделе следующим образом:

     function closeRow(divName) {
    $("#"  divName).append("</div>");
}   

function closeSection(divName) {
    $("#"  divName).append("</div></section>");
}

Однако Jquery, похоже, сам добавляет закрывающие теги. Что портит мой код.

Я получаю этот html:

 <section id="team" class="pb-5">
        <div class="container">
        </div>   </section>

После выполнения моей первой функции createSection .
Как я могу избежать этого?

1. пожалуйста, поделитесь демонстрацией

2. он автоматически сгенерирует закрывающий тег, поэтому лучше создать HTML-строку (добавить) и вставить в конце.

3. Я знаю, что он автоматически генерирует закрывающий тег, но как этого избежать?

4. есть ли причина, по которой вы не можете объединить все это в одну функцию?

5. Возможно, поместите один полный «раздел» в html-шаблон и клонируйте его каждый раз, когда вы хотите добавить новый раздел.

Ответ №1:

У элементов нет тегов. Они сами по себе являются целыми объектами.

Теги используются для создания элементов в HTML.

jQuery позволяет использовать синтаксис HTML для создания элементов, но это всего лишь абстракция. jQuery не хранит строку HTML в памяти и не позволяет вам изменять ее. Он имеет дело с целыми элементами.

Если вы хотите работать со строкой HTML, то вам нужно иметь дело со строкой, а не с jQuery.

Однако лучше работать с элементами. Создайте div с помощью $() и не append() . Добавьте к нему дочерние элементы. Добавьте его к родительскому элементу.

 function createRow(divName) {
     var row = $("<div />");
     row.addClass("row");
     $("#"  divName).append(div);
     return row;
}