How to find an element in HTML and change it's text Content without breaking DOM events-CodePudding

I need to find an element and replace the text.Content of it within a constantly changing table.

Hello Everyone!

I'm fairly new to coding, but I've come across an issue when trying to replace certain elements text Content.

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 reshuffle 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 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 into the right direction with all of this, and I am an complete newbie when it comes to all of this, I've basically been scavenging bits of code from everywhere and tryign 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 is even.

Any and all help would be much appreciated!

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".