时间戳

首页 > 解决方案 > 使用 JS 或 jQuery 将类添加到文本行

javascript - 使用 JS 或 jQuery 将类添加到文本行

问题描述

我有一个由 WordPress 插件生成的文本，该插件放在一个 div 中。请参见下面的示例。没有 p 标签什么都没有。有没有办法为每行添加一些 HTML 标签，以便我可以正确设置它们的样式？

<div class="am-event-modal__description">Lorem ipsum, or lipsum as it is sometimes known,

Lorem ipsum, or lipsum as it is sometimes known,
Lorem ipsum, or lipsum as it is sometimes known,

Dates: 
april 1
aprili 2
april 3
april 4</div>

谢谢！

标签： javascriptjquery

解决方案

您可以用新行拆分文本，然后将每一行放在一个p元素中，如下所示：

const div = document.querySelector('.am-event-modal__description');
const doc = document.createDocumentFragment();
div.childNodes.forEach(el => {
  if (el.nodeType !== Node.TEXT_NODE) {
    doc.appendChild(el);
    return;
  }
  el.textContent.split('\n').forEach(line => {
    const p = document.createElement('p');
    p.textContent = line;
    doc.appendChild(p);
  });
});
div.textContent = '';
div.appendChild(doc);
<div class="am-event-modal__description">Lorem ipsum, or lipsum as it is sometimes known,

Lorem ipsum, or lipsum as it is sometimes known,
Lorem ipsum, or lipsum as it is sometimes known,

Dates: 
april 1
aprili 2
april 3
april 4</div>

推荐阅读