Search code examples
javascripthtmlelement

Update value of child element base on parent class name

I want to change the value inside of all child elements, inside of an html file, based on the parent element's class name. This has to be done using JavaScript.

I have done this on elements that have a static value by creating a TreeWalker of all text nodes which was fairly straight forward but to do it for dynamic elements is proving a lot harder. Happy to do this myself if someone could point me to some documentation on how I would achieve this?

Essentially what I would like to do is prepend all the values in the child class tw-truncate in the <tbody> with a value. I would like to keep the original value in there.

Link to jsfiddle

Error:

enter image description here

Intended Result:

enter image description here

Current Result:

enter image description here

Solution

  • I see what you are trying to achieve. If you want to add a separator, Why don't you go with CSS?

    Using Border

    tbody .tw-group {
      border-left: 1px solid black;
      padding-left: 5px; /*just for some space*/
}

    Or If you want to use the | character,

    tbody .tw-group::before {
  content: "| ";
}