How to change this jquery code to javascript?-CodePudding

I have been reading and studying about this library to be able to change the code of this codebox from jquery to javascript (https://codepen.io/mrWilson123/pen/OJMVwzd?editors=1010) but I got stuck in this part.

$(".slide-captions").html(function () {
        return (
          "<h2 class='current-title'>"  
          currentTitle  
          "</h2>"  
          "<h3 class='current-subtitle'>"  
          currentSubtitle  
          "</h3>"
        );
      });

I understand that it's getting the div element and putting inner html code into it so I tried this but it didn't work.

document.querySelector(".slide-captions").innerHTML(
          "<h2 class='current-title'>"  
            currentTitle  
            "</h2>"  
            "<h3 class='current-subtitle'>"  
            currentSubtitle  
            "</h3>");

What am I doing wrong if someone could help me, thanks.

CodePudding user response：

Whenever appending to the DOM, there is a string-oriented approach using parse-able strings of HTML and properties and methods like:

.innerHTML
.insertAdjacentHTML()

There is also a construction-oriented approach using DOM Nodes and properties and methods like:

.insertBefore() / .before()
.appendChild / .append()
.insertAdjacentElement()
.classList

Whichever approach you normally use to build DOM, it's useful to be aware of the other approach:

String-oriented Approach

let slideCaptions = document.querySelector('.slide-captions');

let myHTML = '';
myHTML  = '<h2 >'   currentTitle   '</h2>';
myHTML  = '<h3 class='current-subtitle'>'   currentSubtitle   '</h3>';

slideCaptions.innerHTML = myHTML;

Construction-oriented Approach

let slideCaptions = document.querySelector('.slide-captions');

let titleElement = document.createElement('h2');
titleElement.classList.add('current-title');
titleElement.textContent = currentTitle;
slideCaptions.appendChild(titleElement);

let subtitleElement = document.createElement('h3');
subtitleElement.classList.add('current-subtitle');
subtitleElement.textContent = currentSubtitle;
slideCaptions.appendChild(subtitleElement);

CodePudding user response：

Try this :

document.querySelector('.slide-captions').innerHTML=`
        <h2 class='current-title'>"  
        currentTitle  
        "</h2>"  
        "<h3 class='current-subtitle'>"  
        currentSubtitle  
        "</h3>`;

if there any error use this instead

document.querySelectorAll('.slide-captions')[0] // .innerHTML ....