How to set innerText value for li using query selector in angular 8

Asked Feb 10 '20 at 12:05

Active Feb 10 '20 at 12:56

Viewed 584 times

Tried to set innertext to third li of ul in angular 8 but not working.How to select ul and third li using queryselector to find the solution

app.component.html:

<tr>
<div class="wrapper">
  <ul>
    <li><span>Test 1</span></li>
    <li><span>Test 2</span></li>
    <li><span>Test 3</span></li>
    <li><span>Test 4</span></li>
    <li><span>Test 5</span></li>
  </ul>
</div>
</tr>

app.component.ts:

setInnertext(event){ 
    let getTr=event.target.closest('tr');
    getTr.querySelector('.wrapper').querySelector('ul').querySelector('li:nth-child(3)').innerText="New Name";
  }

edited Feb 10 '20 at 12:56

asked Feb 10 '20 at 12:05

Nila Vaani

You have to use `ìnnerHTML`instead of `innerText`. – Reporter Feb 10 '20 at 12:07
use [@ViewChild()](https://angular.io/api/core/ViewChild) – Prashant Pimpale Feb 10 '20 at 12:09
@reporter No, you don't. – Scott Marcus Feb 10 '20 at 12:09
@reporter: Already tried but not working – Nila Vaani Feb 10 '20 at 12:10
@NilaVaani Check this:https://stackoverflow.com/a/51828743/7124761 – Prashant Pimpale Feb 10 '20 at 12:12
There's no need to string separate `.querySelector()` calls together. You can just create a more specific selector. Also, use `.textContent` instead of `.innerText`. `.textContent` is more modern and more standard: `getTr.querySelector('.wrapper > ul:li:nth-child(3)').textContent = "New Name";` – Scott Marcus Feb 10 '20 at 12:21
@ScottMarcus: Not working – Nila Vaani Feb 10 '20 at 12:38
I think you need to double-check what `getTr` is actually returning. What element(s) have you set your event handler up on in the first place? `closeset()` looks for ancestor elements that match the selector, so in your case your handler would have to be set up on something inside of the `tr` in order to locate the `tr` that it is within. – Scott Marcus Feb 10 '20 at 12:40
@ScottMarcus: This line only working:getTr.querySelector('.wrapper > ul') But if use ul:li:nth-child(3) not working – Nila Vaani Feb 10 '20 at 12:46
Sorry, that should have been: `getTr.querySelector('.wrapper > ul > li:nth-child(3)').textContent = "New Name";` – Scott Marcus Feb 10 '20 at 12:47
@ScottMarcus: Getting error like : can not set property 'textContent' – Nila Vaani Feb 10 '20 at 12:54
Ok, now we're getting somewhere. Again, what element have you set the event up on? What element is `getTr`? I have a feeling that it isn't what you think it is? – Scott Marcus Feb 10 '20 at 12:56
@ScottMarcus:Check my question inside li span tag is there – Nila Vaani Feb 10 '20 at 12:57
No it's not. I don't think you understand what I'm asking. Where have you set `setInnertext` up as an event handler? Just after the `let getTr...` line, add `console.log(getTr)` and tell us what that reports. – Scott Marcus Feb 10 '20 at 12:59
@ScottMarcus: Now working good..Thanks – Nila Vaani Feb 10 '20 at 13:05
@ScottMarcus: How to remove li class name? removeClass('classname') not working – Nila Vaani Feb 10 '20 at 13:23
`elementReference.classList.remove("className")` – Scott Marcus Feb 10 '20 at 14:28

How to set innerText value for li using query selector in angular 8

0 Answers0