How to change this jquery code to javascript?

Question

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.

.innerHTML = "..." (it's a property, not a function). Please always check the API docs first, especially before posting a question. — user5734311
– user5734311, Commented Jun 7, 2022 at 18:45
Did you open up your browser's developer tools (F12) and look at the Console? If so, you would see an error message there telling you that innerHTML is not a function. — Scott Marcus
– Scott Marcus, Commented Jun 7, 2022 at 18:47
As I said, I studied jquery for a while to be able to make the change and I ended up getting confused, I forgot the = , what an idiotic mistake hahaha, I should delete this question hahaha, thanks anyway. — Alex Garzón
– Alex Garzón, Commented Jun 7, 2022 at 18:51

Rounin · Accepted Answer · 2022-06-07 20:50:35Z

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 class="current-title">' + 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);

Joukhar · Accepted Answer · 2022-06-07 18:54:39Z

0

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 ....

answered Jun 7, 2022 at 18:54

Joukhar

8921 gold badge6 silver badges21 bronze badges

2 Comments

connexo Over a year ago

Using template literals is meant to replace fumbling around with + and quotes. Use either, not both.

Joukhar Over a year ago

I did what was asked but thanks anyway

Collectives™ on Stack Overflow

How to change this jquery code to javascript?

2 Answers 2

String-oriented Approach

Construction-oriented Approach

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

String-oriented Approach

Construction-oriented Approach

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related