javascript - 如何仅在javascript函数内运行代码？

Question

我正在尝试使用ajax发送innerhtml。发送前必须删除某些属性。当我单击按钮时，我删除属性并发送...，一切正常，但我的属性也在 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未定义，但我没有更改它