HTML 字符串到 HTML - JavaScript

本文将会介绍如何将 HTML 字符串转化为 HTML 元素并将其添加到文档中，使用 JavaScript 来进行操作。

HTML 字符串

HTML 字符串是一些 HTML 代码的集合，被包含在一个字符串变量中。举个例子，下面的就是一个 HTML 字符串：

let htmlString = "<div><h1>Hello World!</h1><p>This is a paragraph</p></div>"

将 HTML 字符串转化为 HTML 元素

要将 HTML 字符串转换为 HTML 元素，需要使用 innerHTML 属性将字符串插入到一个空的元素中。 然后就可以获取该元素内的所有子元素并进行下一步操作。例如：

<div id="container"></div>

let container = document.getElementById("container");
container.innerHTML = htmlString;

console.log(container.children);

上述代码将在 #container 内添加一个 <div><h1>Hello World!</h1><p>This is a paragraph</p></div> 元素，并返回该元素的子节点们(<h1>Hello World!</h1>, <p>This is a paragraph</p>)

扩展

• 如果要在给定父级元素内添加子元素，可以使用 insertAdjacentHTML() 方法。例如：

  let parent = document.getElementById("parent");
  parent.insertAdjacentHTML('beforeend', htmlString);
  

• 如果您需要像在 HTML 中一样遍历元素，可以使用 querySelectorAll()，它可以通过选择器来查找和操作元素。例如:

  let elements = container.querySelectorAll('div,p');
  console.log(elements);
  

结论

通过这种方式，您可以直接从服务器或 API 中获得 HTML 字符串，并在客户端动态地将其插入到您的 Web 页面中。使用这种方法，您可以非常轻松地操作 HTML 元素从而动态地渲染您的用户界面。

以上就是将 HTML 字符串转化为 HTML 元素并将其添加到文档中的方法，希望对您有所帮助。