En un ejercicio de clase (estudiando Javascript), necesito agregar un div con la clase q6 debajo de un div existente para la pregunta 6. El maestro lo hizo más difícil (al menos para mí), ya que todas las preguntas tienen div con question de clase .
¿Hay alguna forma de seleccionar un div específico si todos tienen la misma clase?
Aquí hay un ejemplo del código html (traduje la pregunta, ya que estaba en francés):
<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><div class="question"></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>Gracias por tus respuestas
hay varias formas de hacerlo, aquí tienes algunas de ellas.
// 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><div class="question"></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>Uno de los mejores métodos será
question de clase con document.querySelectorAllh2 .Question 6.document.createElement("div") y asigne el className como q6 . Agregue este nuevo nodo al nodo que se identificó en el paso anterior.violín de trabajo
function addDiv() { const questionNodes = document.querySelectorAll('.question'); let searchNode; questionNodes.forEach((node) => { const questionNode = node.querySelector('h2'); if (questionNode.innerHTML.includes('Question 6.')){ searchNode = node; } }); if(searchNode) { const newContent = document.createElement("div"); newContent.className = 'q6'; searchNode.appendChild(newContent); } } .q6 { width: 100%; height: 200px; background: brown; } <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><div class="question"></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> <button onclick="addDiv()">Add Div</button>