使用 document.getElementById 注入元素在 Javascript 中不起作用

Question

I have written a small javascript code and now need to inject the result into my HTML. I have inspected the windows element and even copied the specific selector for that element but it still doesn't inject the answer into it. I am trying to insert it into the span tag in the HTML code.

 const str = new Date().toLocaleString('en-US', { timeZone: 'Asia/Jakarta' }); console.log(str); document.getElementById('#us').textContent = str

 <div class="header-button-item js-item-menu"> <i class="zmdi zmdi-settings"></i> <div class="setting-dropdown js-dropdown"> <div class="account-dropdown__body"> <div class="account-dropdown__item"> <a href="#"><i class="zmdi zmdi-email"></i>America Time&nbsp;&nbsp; - <span id="us"></span></a> </div> </div> </div> </div>

Answer 1

You could try this:

 const str = new Date().toLocaleString('en-US', { timeZone: 'Asia/Jakarta' }); console.log(str); document.getElementById('us').innerHTML = str

Answer 2

Thanks to you all, I was able to solve it after going through all the comments.

my mistake was using the # together with the getElementById. So, I had to remove the # which then made it work well.

But if you need to use the # then you can go with something like getSelector.

document.getElementById('us').textContent = us_time 

or

document.getSelector('#us').textContent = us_time 

Answer 3

You're getting confused with querySelector .

 const str = new Date().toLocaleString('en-US', { timeZone: 'Asia/Jakarta' }); console.log(str); document.querySelector('#us').textContent = str

 <div class="header-button-item js-item-menu"> <i class="zmdi zmdi-settings"></i> <div class="setting-dropdown js-dropdown"> <div class="account-dropdown__body"> <div class="account-dropdown__item"> <a href="#"><i class="zmdi zmdi-email"></i>America Time&nbsp;&nbsp; - <span id="us"></span></a> </div> </div> </div> </div>