Скопировать текст из всех h3 на странице в определенный div

Question

Есть JavaScript код. Он копирует только первую h3 и вставляет в нужный div. Как собрать со страницы все h2, h3 и скопировать (обернуть в div, сейчас он остается в теге h3)?

let header = document.querySelector('h3');
let navigation = document.querySelector('.navigation');
const copy = header.cloneNode(true);
navigation.append(copy);

    .navigation{


        padding: 30px;
        background: #d1e5ff;
    }

<div class="container">

  <p>That is where data visualization comes into play. Data visualization makes your life easy by taking the raw data and converting it into visuals and models that highlight your weak points, or growth opportunities.</p>

  <h2 id="h2">What is Dashboard?</h2>

  <p>Dashboards are customizable visual representations of reports. Most likely, your sales, marketing, service teams have built various reports depending on the business unit goals. Sometimes, having detailed reporting at all levels is overwhelming.</p>

  <h3>Sales Funnel Dashboard</h3>

  <p>It also assists businesses in training and coaching their personnel by holding them accountable for achieving forecasted results. Companies can also use the dashboard to set a sales quota and the quota attainment rate.</p>

  <h3>Dashboard</h3>

  <p>No business can thrive without providing exceptional customer services to its clientele. It is why many turn towards the customer service supervisor dashboard to get reports about the customer's feedback. The access to this dashboard is usually in the
    hands of the head of the CS department.</p>

</div>

<div class="navigation">

  <div class="navigation_content">


  </div>

</div>

Answer 1

querySelector - берет только первый элемент на страницы. Вам нужен querySelectorAll, который будет хранить в себе коллекцию элементов.
Далее пробегитесь по этой коллекции в цикле, сложите все данные, например в переменную, сконкатенировав их.
После цикла данные поместите в div

Answer 2

Нашла такое решение

let header = document.querySelectorAll('h2,h3')
let navigation = document.querySelector('.navigation')

for(let tag of header) {
  let a = document.createElement('a')
  a.href = '#'
  a.innerHTML = tag.innerHTML
  navigation.append(a)  
  a.addEventListener('click', e => {
    e.preventDefault()
    tag.scrollIntoView({behavior: 'smooth'})
  })
}

Answer 3

Вот что у меня получилось, но если хотите только текст, без h3 или h2 то просто вместо temp напишь temp.innerHTML

let h3 = document.querySelectorAll('h3');
let h2 = document.querySelectorAll('h2');
let navigation = document.querySelector('.navigation');

for(let i = 0; i < h2.length; i++){
  let temp = h2[i].cloneNode(true); 
  navigation.append(temp);
}

for(let i = 0; i < h3.length; i++){
  let temp = h3[i].cloneNode(true); 
  navigation.append(temp);
}

.navigation {
  padding: 30px;
  background: #d1e5ff;
}

<div class="container">

  <p>That is where data visualization comes into play. Data visualization makes your life easy by taking the raw data and converting it into visuals and models that highlight your weak points, or growth opportunities.</p>

  <h2 id="h2">What is Dashboard?</h2>

  <p>Dashboards are customizable visual representations of reports. Most likely, your sales, marketing, service teams have built various reports depending on the business unit goals. Sometimes, having detailed reporting at all levels is overwhelming.</p>

  <h3>Sales Funnel Dashboard</h3>

  <p>It also assists businesses in training and coaching their personnel by holding them accountable for achieving forecasted results. Companies can also use the dashboard to set a sales quota and the quota attainment rate.</p>

  <h3>Dashboard</h3>

  <p>No business can thrive without providing exceptional customer services to its clientele. It is why many turn towards the customer service supervisor dashboard to get reports about the customer's feedback. The access to this dashboard is usually in the
    hands of the head of the CS department.</p>

</div>

<div class="navigation"></div>

БЛОГ НА HUSL

Скопировать текст из всех h3 на странице в определенный div

Ответы (3 шт):