What is the best way to target and select all spans within a specific div using JavaScript?

Question

What is the best way to target and select all spans within a specific div using JavaScript?

I'm struggling with selecting all spans in the card using code that currently only selects the first span when I use getElementsByTagName. Can anyone offer assistance as I have multiple cards containing spans?

TypeError: Failed to execute 'insertBefore' on 'Node': parameter 2 is not of type 'Node'. at HTMLDivElement.

Here is the JavaScript code snippet I am working on:

const last = document.getElementById('last');

last.addEventListener("click", (event)=>      
  {
  if(event.target.tagName === 'I')            
    {
    const icon = event.target;                       
    const card = icon.parentNode;
    if(icon.getAttribute('value') === 'remove')      
      {
      last.removeChild(card);                        
      }
    else if(icon.getAttribute('value') === 'edit')   
      {
      const span      = card.firstElementChild;
      const input     = document.createElement('input');  
      input.type      = 'text';                           
      input.value     = span.textContent;                 
      card.insertBefore(input, span);                     
      card.removeChild(span);                             
      icon.className  = 'fa fa-check-circle';             
      icon.setAttribute('id','green-color');              
      icon.setAttribute('value','');                      
      }
    else if(icon.getAttribute('value') === '')
      {
      const input      = card.firstElementChild;
      const span       = document.createElement('span');
      span.textContent = input.value;                    
      card.insertBefore(span, input);                    
      card.removeChild(input);                           
      icon.className   = 'fa fa-edit';                   
      icon.setAttribute('id','');                       
      icon.setAttribute('class','fa fa-edit edit');     
      icon.setAttribute('value','edit');                 
      }
    }
  })

<div class="row last" id="last">
  <h4 class="exam-header col-12">Schedule of exams dates</h4>
  <a class="exam-info teacher-link text-md-center col-8" id="teacher-link" href="#">
    <span class="subject subject-name">Computer Science</span>
    <span class="subject subject-date">2021/12/2</span>
    <span class="subject subject-time">9:00 AM</span>
    <span class="subject subject-duration">2h</span>
    <i class="fa fa-edit edit" value="edit"></i>
    <i class="fa fa-times remove" value="remove"></i>
  </a>
  <a class="exam-info teacher-link text-md-center col-8" id="teacher-link" href="#">
    <span class="subject subject-name">Computer Science</span>
    <span class="subject subject-date">2021/12/2</span>
    <span class="subject subject-time">9:00 AM</span>
    <span class="subject subject-duration">2h</span>
    <i class="fa fa-edit edit" value="edit"></i>
    <i class="fa fa-times remove" value="remove"></i>
  </a>
</div>

javascript html css

Answer 1

Answer №1

If you want to improve the way you listen to events on multiple divs or cards, here's a handy tip. Instead of attaching event listeners to each individual card, get a reference to the main element containing all the cards and listen for clicks on that element.

const cardContainer = document.querySelector('div.card-list');
cardContainer.addEventListener("click", (event) => {
  const clickedElement = event.target;
  // Add your event handling logic here - make sure to verify the 'target' is the right element.
});

Another useful technique is to use querySelectorAll to select multiple elements, then iterate over them using a loop:

const allSpans = document.querySelectorAll('div span');

allSpans.forEach((span) => {
    // Perform actions with each span element
})

Answer 2

If you want to improve the way you listen to events on multiple divs or cards, here's a handy tip. Instead of attaching event listeners to each individual card, get a reference to the main element containing all the cards and listen for clicks on that element.

const cardContainer = document.querySelector('div.card-list');
cardContainer.addEventListener("click", (event) => {
  const clickedElement = event.target;
  // Add your event handling logic here - make sure to verify the 'target' is the right element.
});

Another useful technique is to use querySelectorAll to select multiple elements, then iterate over them using a loop:

const allSpans = document.querySelectorAll('div span');

allSpans.forEach((span) => {
    // Perform actions with each span element
})

Answer 3

Answer №2

For those interested in experimenting with getElementsByTagName or ClassName, here is a sample code snippet to help you get started:

var div = document.getElementsByTagName("div")[0]
var spans = div.getElementsByTagName("span");
for(let i = 0; i < spans.length; i++) {
  spans[i].innerText = 123;
}

Answer 4

For those interested in experimenting with getElementsByTagName or ClassName, here is a sample code snippet to help you get started:

var div = document.getElementsByTagName("div")[0]
var spans = div.getElementsByTagName("span");
for(let i = 0; i < spans.length; i++) {
  spans[i].innerText = 123;
}

What is the best way to target and select all spans within a specific div using JavaScript?

Answer №1

Answer №2

Similar questions

Tips for extracting a value from a geojson response using a specific key

Error encountered when attempting to trigger a Bootstrap dropdown within a designated div

"Encountering an unfamiliar authentication strategy while using NodeJS passport

Rephrase the ajax call and the data retrieved

Comparing hardware-accelerated CSS3 animations, transitions, and jQuery animate for mobile devices

Error encountered when trying to generate a collection from JSON using Backbone framework

The Flask web API is unable to process image files sent through AJAX requests

Display a table showcasing precise array data using Angular

Executing a post request using axios

Formatting a contact form to display information in an email

Python code encountered an issue while trying to find the element with the locator //input[@name="session[username_or_email]". The element could not

When lines are added to a file in Node.js, the content is written in a haphazard sequence

Simulated function for handling express functions

Is it possible to echo a CSS class using PHP?

Determine whether the textfield is a number or not upon losing focus

Tips for managing an event using the bxSlider callback API

What are some reasons for the slow performance of AWS SQS?

I am having trouble getting ng-change to work. Can someone explain how to properly implement ng

Create a Three.js material that displays only the outline without any fill

How to transform complex JSON into a nodes and links format using JavaScript with various key values