JavaScript replaces nested HTML DOM elements and restores, Error-CodePudding

I am writing a webpage translation program.
I need to delete the DOM elements in the HTML that do not need to be translated,
and then restore the previously deleted DOM elements to the HTML after the translation of the remaining content is completed.

My own writing is:

Step 1: body_dom_del(), Replace the DOM element in HTML that does not need translation with a placeholder DOM element,
Step 2: body_dom_add(), After the translation is completed, replace the placeholder DOM element with the previously replaced DOM element.

Problems with my program:

Step 1: When two or more replaced DOM elements are nested, it will only be replaced with a placeholder DOM element,
Step 2: After the second replacement, it will fail because the number of DOM elements replaced for the first time is inconsistent with the number of occupied DOM elements.

How can I modify it?

Here is the code:

Example code execution steps and correct execution results:

Step 1: body_dom_del(), error: 3 DOM elements (img, pre, code) that are not translated are replaced by 2 placeholder DOM elements (code is nested within pre, so it is 2 DOM replaced by 1 placeholder DOM element )
Step 2: body_dom_add(), error, because the number of 3 deleted untranslated DOM elements and 2 placeholder DOM elements is inconsistent, the placeholder DOM element cannot be replaced back to the original untranslated DOM element

The correct program result should be:
After the two functions are executed, the HTML of the web page remains unchanged (the three replaced DOMs (pre, code, img) can still be replaced back in HTML)

test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>error</title>
</head>
<body>

<img src="#">
<div>111111</div>
<!--the <pre> and <code> is nested，replace error-->
<pre>
  this is pre
  <div>this is in pre the div</div>
  <code>this is code</code>
</pre>
<div>222222</div>

<script>
// Replace no translate DOM elements with placeholder DOM elements.
var body_dom_delete = body_dom_del();

// Other operations, omitted...

// restore no translate DOM elements into HTML,
// Error when special DOM element is nested
body_dom_add(body_dom_delete.body_dom, body_dom_delete.no_trans_dom)


function body_dom_del(){
    let body_trans = document.body;
    let no_trans_dom = body_trans.querySelectorAll("pre, code, img");  // no translate DOM element

    for (let i=0; i<no_trans_dom.length; i  ) {
      let replace_no_trans_dom = document.createElement('span');  // create placeholder DOM elements
      replace_no_trans_dom.setAttribute('class','placeholder');

      let parent = no_trans_dom[i].parentNode;
      parent.replaceChild(replace_no_trans_dom, no_trans_dom[i]); // replace
    };

    // return:
    // body_dom: HTML DOM after replacing DOM elements,
    // no_trans_dom: Array of no translate DOM elements to be replaced
    return {'body_dom':body_trans, 'no_trans_dom':no_trans_dom};
}


function body_dom_add(body_trans, no_trans_dom){
    let replace_no_trans_dom = body_trans.querySelectorAll(".placeholder");

    // When no translate DOM elements are nested, 
    // the number of no translate elements and placeholder elements is inconsistent.
    console.log(replace_no_trans_dom.length, no_trans_dom.length);
    
    if(replace_no_trans_dom.length == no_trans_dom.length){

      for (let i=0; i<replace_no_trans_dom.length; i  ) {
        let parent = replace_no_trans_dom[i].parentNode;
        parent.replaceChild(no_trans_dom[i], replace_no_trans_dom[i]);
      };

    } else {
      console.log('error! The number of special elements and placeholder elements is inconsistent.');
    }
    return body_trans;
}
</script>
</body>
</html>

CodePudding user response：

yes, i got't it. thank you @Kaiido

Successful code：

test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>error</title>
</head>
<body>
<img src="#">
<div>111111</div>
<!--the <pre> and <code> is nested，replace error-->
<pre>
  this is pre
  <div>this is in pre the div</div>
  <code>this is code</code>
</pre>
<div>222222</div>

<script>
var body_dom_delete = body_dom_del();
body_dom_add(body_dom_delete.no_trans_dom, body_dom_delete.holder_array)

function body_dom_del(){
    let body_trans = document.body;
    let no_trans_dom = body_trans.querySelectorAll("pre, code, img");  // no translate DOM element
    var holder_array = []
    
    for (let i=0; i<no_trans_dom.length; i  ) {
      let replace_no_trans_dom = document.createElement('span');  // create placeholder DOM elements
      replace_no_trans_dom.setAttribute('class','placeholder');
      holder_array.push(replace_no_trans_dom)
      // let parent = no_trans_dom[i].parentNode;
      // parent.replaceChild(replace_no_trans_dom, no_trans_dom[i]); // replace
      no_trans_dom[i].replaceWith(replace_no_trans_dom);
    };
    return {'body_dom':body_trans, 'no_trans_dom':no_trans_dom, 'holder_array':holder_array};
}

function body_dom_add(no_trans_dom, holder_array){
    for (let i=0; i<no_trans_dom.length; i  ) {
      // let parent = replace_no_trans_dom[i].parentNode;
      // parent.replaceChild(no_trans_dom[i], replace_no_trans_dom[i]);
      holder_array[i].replaceWith(no_trans_dom[i]);
    };
}
</script>
</body>
</html>