How to use document.querySelector() in javascript

[ShagunMalik]

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.

[Asutosh_Jena_ · Accepted solution]

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!

[ShagunMalik]

it is showing null value for x.

[Asutosh_Jena_]

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

[ShagunMalik]

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

[Asutosh_Jena_]

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;
}

[ShagunMalik]

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

[ShagunMalik]

Can the same work be done using jquery?

[Asutosh_Jena_]

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

[ShagunMalik]

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

[Asutosh_Jena_]

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. 

[ShagunMalik]

Same error, cannot read property 'appendChild ' of null

[Asutosh_Jena_]

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?

[ShagunMalik]

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

[ShagunMalik]

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

[Asutosh_Jena_]

Sounds good!

[Anudeep_Garnepudi]

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