Find and change element's textContent without breaking DOM events-CodePudding

I need to find an element and replace the .textContent of it within a constantly changing table. I'm fairly new to coding, but I've come across an issue when trying to replace certain elements' .textContent.

I have a table on my website that shuffles the values upon every new session. I would like to have certain values within that table to be replaced.

<table class = "tb">
  <tr>
    <td>Element 1</td>
    <td>Element 2</td>
    <td>Element 3</td>
  </tr>
</table>

And upon each new session, the order of each element is changed.

I want to first find "Element 2" and change it to "Element 2.1", but I cannot do it with my current script because it just changes the 2nd row of the table rather than what I am looking for. So upon reshuffling, it might change Element 1 to the replacement value instead.

I have a very simple script to swap out elements.

const Tableswap = () => {
    const findele = document.querySelectorAll(".tb")[1];
    if (findele === null){
        return;
    };
    findele.textContent = "Element 2.1";
};

I've tried the following to find the particular element that I am looking for, but I am not sure where to go from here:

//find the required element

function contains(selector, text) {
  var elements = document.querySelectorAll(selector);
  return Array.prototype.filter.call(elements, function(element){
    return RegExp(text).test(element.textContent);
  });
}

const finder = contains('.tb', "Element 2");

if (finder === null){
    return;
};
finder.tb.textContent = "Element 2.1";

I am honestly not sure if I even went in the right direction with all of this, and I am a complete newbie when it comes to all of this, I've basically been scavenging bits of code from everywhere and trying to understand what I'm doing along the way. I would prefer everything to be in JS, as I have absolutely no experience with JQuery and have no clue what it even is.

CodePudding user response：

Here's what you were trying to achieve through the second script.
I tried to keep it close to your orginal code to make it easier for you to comprehend.

The script has been deferred to prevent it from executing before the DOM has finished loading.

<!DOCTYPE html>

<html>
  <body>
    <table >
      <tr>
        <td>Element 1</td>
        <td>Element 2</td>
        <td>Element 3</td>
      </tr>
    </table>

    <script defer>
      function findAndReplace(selector, find, replace) {
        let elements = document.querySelectorAll(selector);
        return Array.prototype.filter.call(elements, function (element) {
          if (RegExp(find).test(element.textContent))
            element.textContent = replace;
        });
      }
      findAndReplace(".tb td", "Element 2", "Element 2.1");
    </script>
  </body>
</html>

CodePudding user response：

In your HTML, change it to <td id="myID">, and then you can use document.getElementById(myID).innerHTML = "Element 2.1".