Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

How to use document.querySelector() in javascript

Avatar

Level 3

I'm trying to use document.querySelector() in javascript.

There is a element in my html with 'ul' tag.

then in my javascript I'm using it as :

const ultag = document.querySelector("ul");

then I'm calling a function for pagination like :

function x(pagecount,currentpage)

{

let litag =' ';

if (page<1)

{

litag= something;

}

ultag.innerHTMl = litag;

}

but it is showing error in ultag.innerHTML as it is showing null value for ultag.

Please help how to use it.

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @ShagunMalik 

 

Let's say you have the HTML markup as:

 

<ul class="project-list single-col">
<li class="project-item" style="clear: left;">
Something
</li>
<li class="project-item" style="clear: left;">
Something
</li>
<li class="project-item" style="clear: left;">
Something
</li>
</ul>

 

In JS If you use the below code:

var x = document.querySelector("ul");

 x will hold the complete markup that we have above.

 

Thanks!

View solution in original post

16 Replies

Avatar

Correct answer by
Community Advisor

Hi @ShagunMalik 

 

Let's say you have the HTML markup as:

 

<ul class="project-list single-col">
<li class="project-item" style="clear: left;">
Something
</li>
<li class="project-item" style="clear: left;">
Something
</li>
<li class="project-item" style="clear: left;">
Something
</li>
</ul>

 

In JS If you use the below code:

var x = document.querySelector("ul");

 x will hold the complete markup that we have above.

 

Thanks!

Avatar

Community Advisor

Can you just try in browser console once? I just tried and it works!

 

asutosh_jena_0-1618920943697.png

 

Avatar

Level 3

Hi @Asutosh_Jena_ , you are right it is working but when I'm trying to use x.innerhtml in js then it is showing error. I have modified my question, can please read again my question and then help? Thank you

Avatar

Community Advisor

Hi @ShagunMalik 

 

Can you try with the below code?

var ultag = document.querySelector("ul");

function x(pagecount, currentpage) {
let litag = '';
if (pagecount < 1) {
litag = "something";
} else{
litag = "nothing";
}
ultag.innerHTML = litag;
}

 

Avatar

Level 3

No @Asutosh_Jena_ , still the same error, console is showing error cannot set property 'innerHTML' of null.

Avatar

Community Advisor
This can be done in both JS and Jquery. Can you please put the HTML structure. Want to know why it's returning null.

Avatar

Level 3

<div class="something">

<ul class="pagination" id ='pagination'>

</ul>

</div>

In between of UL tags I'm trying to dynamically add pagination. 

When I'm using document.querySelector(".pagination"); in console then it is working absolutely fine but showing error when using it with innerHTML.

Avatar

Community Advisor

Hi @ShagunMalik 

Can you try with this?

 

var ultag = document.querySelector("ul");

function x(pagecount) {
for (var i = 0; i < pagecount.length; i++) {
var li = document.createElement("li");
li.appendChild(document.createTextNode("Something"));
ultag.appendChild(li);
}
}

 We need to create <li> within <ul> and append the content. 

Avatar

Level 3
Same error, cannot read property 'appendChild ' of null

Avatar

Community Advisor

Hi @ShagunMalik 

 

If you have the below markup in your page view source i.e in the HTML, it will never return null.

<div class="something">

<ul class="pagination" id ='pagination'>

</ul>

</div>

 

You are not adding these elements in Jquery right?

Avatar

Level 3

Yes @Asutosh_Jena_ Error_pagination.jpg I'm not adding these elements in jquery. I have added the Screenshot for your reference.

Avatar

Level 3

Hey @Asutosh_Jena_ , working fine now. Thank you . There was a mistake in my calling in js.

Avatar

Community Advisor

@ShagunMalik 

Are you sure you have at-least one ul tag in page? If there is no ul tag in DOM, document.querySelector("..") will return null.