如何用原生JavaScript替换HTML中每个</p>标签并插入随机内容

实现步骤： #

1. 准备随机语录数据源
2. 获取页面中所有<p>元素
3. 遍历每个<p>标签，生成随机语录并插入到标签末尾

完整代码示例： #

// 定义随机语录数组
const quotes = [
  "今日事今日毕",
  "每一个不曾起舞的日子，都是对生命的辜负",
  "不忘初心，方得始终",
  "人生没有白走的路，每一步都算数",
  "保持热爱，奔赴山海"
];

// 获取所有p标签
const paragraphs = document.querySelectorAll('p');

// 遍历每个p标签
paragraphs.forEach(para => {
  // 生成随机索引，选取语录
  const randomIndex = Math.floor(Math.random() * quotes.length);
  const randomQuote = quotes[randomIndex];
  
  // 创建span元素
  const span = document.createElement('span');
  span.textContent = ` ${randomQuote}`; // 加空格分隔原文本和语录
  
  // 将span插入到p标签末尾
  para.appendChild(span);
});

代码说明： #

• document.querySelectorAll('p')：原生JS方法，获取页面内所有<p>元素集合
• Math.random()结合Math.floor()生成数组随机索引，实现语录随机选取
• document.createElement('span')创建新元素，通过appendChild()插入到目标标签内，避免直接操作HTML字符串引发的安全或格式问题

效果示例： #

执行代码后，页面中的<p>标签会变为：

<p>This is some text. <span>每一个不曾起舞的日子，都是对生命的辜负</span></p>
<p>This is some more text. <span>保持热爱，奔赴山海</span></p>

内容的提问来源于stack exchange，提问作者TJS101