插件窝 干货文章 js如何让HTML分段

js如何让HTML分段

element strong Paragraph 方法 587    来源:    2024-10-19
在 javascript 中,有以下三种方法可用于分段 html:使用 innerhtml 属性使用 createelement() 和 appendchild() 方法使用 insertadjacenthtml() 方法

如何在 JavaScript 中分段 HTML

在 JavaScript 中分段 HTML 可以使用以下方法:

1. 使用 innerHTML 属性

const element = document.getElementById("my-element");
element.innerHTML = "Paragraph 1<br><br>Paragraph 2";

2. 使用 createElement() 和 appendChild() 方法

立即学习“前端免费学习笔记(深入)”;

const element = document.getElementById("my-element");

// 创建一个段落
const paragraph1 = document.createElement("p");
paragraph1.textContent = "Paragraph 1";

// 创建另一个段落
const paragraph2 = document.createElement("p");
paragraph2.textContent = "Paragraph 2";

// 将段落添加到元素中
element.appendChild(paragraph1);
element.appendChild(paragraph2);

3. 使用 insertAdjacentHTML() 方法

const element = document.getElementById("my-element");
element.insertAdjacentHTML("beforeend", "Paragraph 1<br><br>Paragraph 2");

注意:

  • 使用 innerHTML 时,请确保传入的 HTML 是经过验证的,以避免跨站点脚本 (XSS) 攻击。
  • createElement() 和 appendChild() 方法比 innerHTML 更安全,因为它们不会解析 HTML。
  • insertAdjacentHTML() 方法提供了插入 HTML 的灵活性,支持多种位置(例如 beforebegin、afterend)。