Change Content - Javascript

Change html element content using pure javascript author(s): Deepu Mohan Puthrote (WarFox)

HTML

<div class="field-section">
  <div class="selected-field">
    <div class="selected-field-name">hello how are you today?</div>
  </div>
  <div class="d-flex">
    <div class="remove-field" Icon="plus" width="16px" height="16px" (click)="removeField(selectedField)">ariel</div>
    <div class="remove-field" Icon="x-close" width="16px" height="16px" (click)="removeField(selectedField)">emma</div>
  </div>
</div>

CSS

.selected-field-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remove-field {
  display: none;
  background-color: red;
  width: 150px;
}

.selected-field-name{
  overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-section {
  display: flex;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid #CCCED3;
  box-sizing: border-box;
  border-radius: 2px;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  color: #37383A;
  padding: 6px;
  margin-top: 10px;
  width: 195px;
  max-width: 195px;
  overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}

 .field-section:hover .remove-field{
   
      display: flex;
    
  }

JavaScript

function changeContent () {
    var myelement = document.getElementById("myelement");
    myelement.innerHTML= "New Text";
}

window.onload = changeContent ;