Как запустить код только внутри функции javascript?

Question

Я пытаюсь с помощью ajax отправить внутренний html. Некоторые атрибуты должны быть удалены перед отправкой. Когда я нажимаю кнопку, я удаляю атрибуты и отправляю ..., и все работает нормально, но мои атрибуты также удаляются в html.

Их следует удалять только внутри функции и отправлять, но не следует удалять в html! КАК ЕГО ИЗБЕЖАТЬ.

Код:

<div id="container" class="container" >

    <div id="parent1" class="parent">
         <div id="child1" class="child" ondrop="drop(event);" ondragover="allowDrop(event);" >same content</div>
    </div>

    <div id="parent2" class="parent">
         <div id="child2" class="child" ondrop="drop(event);" ondragover="allowDrop(event);" >same content</div>
    </div>

    <div id="parent3" class="parent">
         <div id="child3" class="child" ondrop="drop(event);" ondragover="allowDrop(event);" >same content</div>
    </div>

</div>
<button onclick="myFunction()">Click me</button>

function myFunction() {
  var divsclass = Array.prototype.slice.call(document.getElementsByClassName("parent"));

  var parenthtml = "";
  divsclass.forEach(function(div){
    Array.from(document.querySelectorAll(".parent [ondrop]")).forEach((elem) => elem.removeAttribute("ondrop"));
    Array.from(document.querySelectorAll(".parent [ondragover]")).forEach((elem) => elem.removeAttribute("ondragover"));
    var parenthtmlsend = div.innerHTML;
    parenthtml += "&PARENTHTML"+ n++ +"=" + parenthtmlsend;
  });

    var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {

            }
        };
        xmlhttp.open("GET", "same-page.php? "+ encodeURI(results) + parenthtml, true);
        xmlhttp.send();

}

Я пытался скопировать код в другой div и затем удалить атрибуты, но даже тогда атрибуты в коде html были удалено.

    var containercopy = document.getElementById("container").innerHTML;
    document.getElementById("container-copy").innerHTML = containercopy;

У меня большой код, поэтому я переписал и приведу краткий пример, возможно, попутно допустив ошибку ...

Answer 1

Я не уверен, что это хороший способ, но вы можете клонировать глубоко ваш элемент в массиве и затем вносить в него изменения.

см. Код

function myFunction() {
  var divsclass = Array.prototype.slice.call(document.getElementsByClassName("parent")); 
   
  var parenthtml = "";
  
  divsclass.forEach(function(div){
    
    // clone
    var clonedDiv = div.cloneNode(true);;
    
    Array.from(clonedDiv.querySelectorAll(".parent [ondrop]")).forEach((elem) =>                              elem.removeAttribute("ondrop"));
    Array.from(clonedDiv.querySelectorAll(".parent [ondragover]")).forEach((elem) =>                          elem.removeAttribute("ondragover"));
    var parenthtmlsend = clonedDiv.innerHTML;
    parenthtml += "&PARENTHTML"+ n++ +"=" + parenthtmlsend;
  });

    var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {

            }
        };
        xmlhttp.open("GET", "same-page.php? "+ encodeURI(results) + parenthtml, true);
        xmlhttp.send();

}

Кажется, в вашем коде n не определено, но я не изменил его