Javascript 加载静态HTML文件并按类拆分为数组

我已经在这方面工作了好几天，我很接近，但不是一路走来。我找到的大多数答案都可以帮助我将文件内容加载到div或变量中，但它不允许我对其执行querySelectorAll。所以，我需要做的是加载文件，然后根据类将其分解为数组。不用多说，代码：

content.txt：

<h3 class="chapter">Chapter 1</h3>
<p>Lorem</p>
<h3 class="chapter">Chapter 2</h3>
<p>Lorem</p>

预期结果：

['<h3 class="chapter">Chapter 1</h3><p>Lorem</p>',
  '<h3 class="chapter">Chapter 2</h3><p>Lorem</p>']

[“第一章Lorem
”，
“第二章洛雷姆”

因此，这将加载文件（已确认），我将html放在一个变量中。我尝试将它加载到DOM中的动态DIV中，以执行

querySelectorAll

，但它返回的只是{}。如果我转储

innerHTML

，我的所有内容都在那里

---

我知道我将香草JS与jQuery混合在一起，但我不确定jQuery的正确方法。有什么想法吗？

选择器

章节将匹配所有
元素。HTML中没有这样的元素，文本文件中也没有这样的元素。这就是为什么没有匹配的

align=“chapter”
是无效的HTML<代码>章节

不是

对齐

属性的有效值，该属性已过时

从编写合理的HTML开始。使用类来区分div元素的类型

<div class="chapter">

---

对不起，这是一个坏的复制粘贴。我编辑了这篇文章以反映适当的代码。然后你似乎忘记了

章节前面的一个点！我是个傻瓜。现在可以了。说真的，两天的时间浪费在尝试各种不同的选项上，从XHR到加载等等。非常感谢。您是否创建“content.txt”？如果你这样做，你应该使用适当的html。。。使用chapter作为类或名称，这样您可以执行类似于
$（html）.each（“.chapter”，function（）{…}）
否则您可以检查这是否正常工作：
$（html）.each（“h3”，function（）{if（attr（align）==“chapter”）{…}它将由用户在静态文件中创建。要求是他们使用chapter类。它可以是任何类型的标记，这就是为什么我们使用class属性。我的复制/粘贴和编辑错误。我本该去上课的。正如@Gothdo所说，我只是忘记了上课的时间。您的最终代码语句是正确的。谢谢
<div class="chapter">

div.querySelectorAll('.chapter');