通过 JS 添加 HTML 到特定的 child-Element

Question

我有一个非常特殊的情况，我有 ~50 child-divs 我不能直接影响，也就是说，我不能添加类或 ids 到一个特定的 child-div 也不能改变div 通过 HTML 因为它们是自动创建的。它们出现在一个简单的 grid/flexbox 中，两个方框并排。我已经用 nth-child 更改了其中一些，但现在我想在 f.ex 之间添加 dividual 标题。 div 30 和 31。

直到现在，当我想要一些字段更大时，我直接通过 nth-child 解决了其中一个 child-divs。

基本结构如下：

    <div class="parent">
      {$content} // basically <div>{$single-box-content}</div>
   </div>

而我目前使用的CSS：

 .parent {
    width: 800px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    }
    
    .parent:nth-child(10) {
    width:800px;
    }

效果很好。但是，既然我想要 above 之一的 div 标题（不在里面），它就不起作用了。当我尝试这个时：

.parent:nth-child(31):before {
content: "Headline";
display: block;
}

它出现在 child-div 里面，而不是在它上面。我无法将 div 添加到 HTML 部分，因为它们都是在后端自动创建的（这是一种形式）。

我想知道是否可以将 JavaScript 与一些 element.innerHTML 一起使用，但我正处于学习 JS 的最开始，我找不到任何（我可以适应）解决JS 中的特定 child-Elements。我的问题有前端解决方案吗？

Answer 1

使用 JS，您可以添加 classes、ID，将 HTML-elements 附加到 DOM 等等。

下面向您展示了如何插入 h2，以及如何将 class 添加到您选择的元素 - 我使用 :nth-child(3) 进行说明，但是你可以用 :nth-child(31) 交换它。该代码在代码段的注释中进行了解释。

// finding the child element with nth-child selector
let selected = document.querySelector('.parent:nth-child(3)');

// giving it a class name
selected.classList.add('parentClass');

// creating a h2 element
let header = document.createElement("h2");
// the text inside the h2 element
let headerText = document.createTextNode("headline");

// appending the text to the h2 element
header.append(headerText);

// giving the child a class name
header.classList.add('childClass');

// appending the headline above/before the selected element 
selected.parentNode.insertBefore(header, selected);

/* the class applied with JS */

.parentClass {
  background-color: red;
}

.childClass {
background-color: limegreen;
}

<div class="parent">parent 1</div>
<div class="parent">parent 2</div>
<div class="parent">parent 3</div>

通过 JS 添加 HTML 到特定的 child-Element

Adding HTML via JS to a specific child-Element

html

javascript

css

css-selectors