Question

我是Web开发的新手，我需要有关如何使用javascript或jquery在部分内插入带有<p>标签的div的帮助吗？

谢谢！

这是我的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>

Answer 1

$("section.section-countdown").prepend("<div><p>text</p></div>");

Answer 2

要使用JS将元素附加到DOM中，可以使用element.appendChild(childNode)方法。

此方法要求您首先创建一个childNode，稍后再添加。您可以使用document.createElement(typeOfElem)来做到这一点。

如果您打算一次附加许多元素，请考虑先使用document.createDocumentFragment()，这样您就不会在每次附加元素时都重新绘制DOM，而是在每个子节点都包含完之后在最后附加它已添加。

在您的示例中，您需要通过使用document.querySelector('.section-countdown')选择父级并将其分配给const变量（例如const sectionCountdownSelector）来指定父级（如果您不打算使用babel，请使用{{1 }}）。

下面的示例代码：

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()。

添加一个内部带有<p>和</p> <section>的Div元素

2 个答案: