javascript - 如果多个div具有相同的类，则将一个div和类添加到一个特定的div？ (JavaScript)

Question

在类练习中，(学习 Javascript)，我需要在现有的 div 下添加一个带有 class q6 的 div问题 6. 老师让它变得更难(至少对我而言)，因为所有问题都有 class question 的 div。

如果它们都具有相同的类，是否可以选择特定的 div？

这是一个 html 代码示例(我翻译了这个问题，因为它是法语):

        <div id="content">
            <div class="question">
                <h2> Question 1. <span>(2pts)</span></h2>
                    Lorem ipsum
                <div class="q1"></div>
            </div>


            <div class="question">
                <h2>Question 2. <span>(2pts)</span></h2>
                    Lorem ipsum
                <div class="q2"></div>
            </div>


            <div class="question q3">
                <h2>Question 3. <span>(3pts)</span></h2>
                    Lorem ipsum
            </div>


            <div class="question">
                <h2>Question 4. <span>(3pts)</span></h2>
                    Lorem ipsum
            </div>


            <div class="question q5">
                <h2>Question 5. <span>(3pts)</span></h2>
                    Lorem ipsum
            </div>


            <div class="question">
                <h2>Question 6. <span>(2pts)</span></h2>
                <h3>
                    Add a div with class <code>q6</code> at the end of the <code>h3</code> in this 
                    question, in the <code>&lt;div class="question"&gt;</code>. If it's well 
                    placed, an orange square will appear. 
                </h3>
                <!-- You need to add the div here with javascript: <div class="q6"></div> -->
            </div>
         </div>

感谢您的回答

Answer 1

有几种方法可以做到这一点，这里是其中的一些。

// fig 1
// use index
const questions = document.getElementsByClassName('question')
questions[5].innerHTML = 'fig 1 work'


// fig 2
// use data- prefix
// this should be the preferred way because this is easier to maintain
// when the list is dynamically created.
// also data- prefix is the least aggresive with web semantics
const target = document.querySelector(`.question[data-key='6']`)
if (target) {
  target.innerHTML += 'fig2 work'
}

// fig 3
// use multiple classes
const targetAlt = document.querySelector('.question.q6')
if (targetAlt) {
  target.innerHTML += 'fig3 work'
}

<div id="content">
  <div class="question">
    <h2> Question 1. <span>(2pts)</span></h2>
    Lorem ipsum
    <div class="q1"></div>
  </div>


  <div class="question">
    <h2>Question 2. <span>(2pts)</span></h2>
    Lorem ipsum
    <div class="q2"></div>
  </div>


  <div class="question q3">
    <h2>Question 3. <span>(3pts)</span></h2>
    Lorem ipsum
  </div>


  <div class="question">
    <h2>Question 4. <span>(3pts)</span></h2>
    Lorem ipsum
  </div>


  <div class="question q5">
    <h2>Question 5. <span>(3pts)</span></h2>
    Lorem ipsum
  </div>


  <div class="question q6" data-key="6">
    <h2>Question 6. <span>(2pts)</span></h2>
    <h3>
      Add a div with class <code>q6</code> at the end of the <code>h3</code> in this question, in the <code>&lt;div class="question"&gt;</code>. If it's well placed, an orange square will appear.
    </h3>
    <!-- You need to add the div here with javascript: <div class="q6"></div> -->
  </div>
</div>