Я новичок в веб-разработке, мне нужна помощь в том, как вставить div с тегом <p> в раздел с помощью javascript или jquery?

Спасибо!

Вот мой HTML-код:

<section class="section-countdown">

<!-- i want to insert a <div> <p> </p> </div> here.-->

    <h2>THIS CONGRESS BEGINS IN</h2>
    <ul class="countdown">
        <li> <span id="days"></span>
            <p class="days_ref">DAYS</p>
        </li>
        <li class="seperator">:</li>
        <li> <span id="hours"></span>
            <p class="hours_ref">HOURS</p>
        </li>
        <li class="seperator">:</li>
        <li> <span id="minutes"></span>
            <p class="minutes_ref">MINUTES</p>
        </li>
        <li class="seperator">:</li>
        <li> <span id="seconds"></span>
            <p class="seconds_ref">SECONDS</p>
        </li>
    </ul>
</section>
-3
セアンデエ 14 Сен 2018 в 08:37

2 ответа

Лучший ответ

Чтобы добавить элементы в DOM с помощью JS, вы можете использовать метод element.appendChild(childNode).

Этот метод требует, чтобы вы сначала создали дочерний узел, который будет добавлен позже. Вы можете сделать это с помощью document.createElement(typeOfElem).

Если вы планируете добавлять сразу несколько элементов, сначала подумайте об использовании document.createDocumentFragment(), чтобы не перерисовывать DOM каждый раз, когда вы добавляете элемент, а вместо этого добавляете его в конце, после добавления каждого дочернего узла.

В вашем примере вам нужно указать родителя, выбрав его с помощью document.querySelector('.section-countdown') и назначив его константной переменной, например const sectionCountdownSelector (если вы не планируете использовать babel, используйте вместо этого var ) .

Пример кода ниже:

const sectionCountdownSelector = document.querySelector('.section-countdown'); // select your div

const docFragment = document.createDocumentFragment(); // to not redraw DOM every time
const divElement = document.createElement('div'); // create a div elem
divElement.setAttribute('class', 'your-desired-class'); // assign a class to it

const paragraphElement = document.createElemet('p'); // create a p elem
paragraphElement.setAttribute('class', 'your-another-class'); // assing a class to it
paragraphElement.innerHTML = 'inner text in the paragraph'; // add text to p elem

docFragment.appendChild(divElement); // append div elem to your fragment
divElement.appendChild(paragraphElement); // append p elem to div elem

sectionCountdownSelector.appendChild(docFragment); // this appends the elem on your DOM

Использование document.createDocumentFragment() рекомендуется, если вы делаете много appendChild() один за другим. Если вам нужно добавить один элемент, просто используйте appendChild() обычным способом.

1
SomeRandomName 19 Сен 2018 в 20:14
$("section.section-countdown").prepend("<div><p>text</p></div>");
3
Steve Kirsch 14 Сен 2018 в 05:41