How to edit html element with Javascript dom?

Question

i try to edit the span element inside with javascript dom:

<div class="data">
<span>Jan. 16, 2019</span>
</div>

So that only last 4 characters are shown,

var list = document.getElementById("data");   
list.removeChild(list.childNodes[3]); 

But it doesnot work

Answer 1

One error: you're searching with getElementById for an element with id data but data is the class .

<div id="data"> should make the list assignment work. Or use document.querySelector('.data')

The next line with removeChild makes no sense to me, at least with given HTML.

Answer 2

In order to only keep the last four characters in the span :

 var list = document.getElementsByClassName("data")[0]; let str = list.childNodes[1].textContent; list.childNodes[1].textContent = str.substring(str.length-4, str.length);

 <div class="data"> <span>Jan. 16, 2019</span> </div>

Answer 3

Two things are going wrong. You are looking for an ID, but the HTML does not have an ID. Also showing the last 4 characters is not going alright.

I would propose to add an id to the span:

<div class="data">
   <span id="date">Jan. 16, 2019</span>
</div>

var span = document.getElementById("date");
var date = span.textContent;
span.textContent = date.substr(date.length - 4);