Question

我对为什么失败感到困惑。我正在尝试直接用jquery的replaceWith完全替换DIV。

我尝试了很多变化，但是没有任何更新。或者，如果我尝试用externalhtml [object HTMLDivElement]代替html。（这意味着我确定要使用节点，对吗？这意味着replaceWith（）应该可以工作？）。

我正在遍历当前显示的'cardObjects'数组，并将其与结构相同的传入数组（这是一个排序的有序列表）进行比较。 object.html是节点元素。并且对象的.target指向元素的ID。


function cardConstructor(item)
     {
     var cardDiv = constructElement('div', "queCard", "machine"+item.machineID+"ID"+item.ID, "");
     //more html stuff gets appended to this element, but not relevant for problem
     cardObject = 
            {
            ID: item.ID,
            machineID: item.machineID, 
            lastID: item.lastID, 
            nextID: item.nextID, 
            jobID: item.jobID,
            target: cardDiv.id, //string
            html: cardDiv //node

        }
        return cardObject;

}
// here is where the problem is - 
//it is in an update loop, 
//this is failing

else if(inc[y].ID != current[y].ID)
                    {
                    console.log("ids do not match, splicing and replacing");
                    console.log("current y target is:");
                    console.log(current[y].target); //334 ---console output
                    var updateTarget = document.getElementById(current[y].target);

                    console.log("old html"); //337
                    console.log(updateTarget); //338
                    console.log("new html"); //339
                    console.log(inc[y].html); //340

                    updateTarget.replaceWith(inc[y].html); 
                    console.log("update target updated: as"); //343
                    console.log(updateTarget);   //344
                    current.splice(y,1, inc[y]);

                }

console.log输出为：

current y target is:
machinewindow.php:334 machine1ID775
machinewindow.php:337 old html

machinewindow.php:338 <div class="queCard" id="machine1ID775"><div class="queCardTitle" id="Titlemachine1ID775"><div class="itter" id="itterDiv+1machine1ID775">1</div><button class="completeBtn" id="complete775" value="775">complete</button></div><div class="queCardBody" id="Bodymachine1ID775">…</div><div class="queCardFooterW" id="queCardFooterWmachine1ID775">…</div></div>

machinewindow.php:339 new html

machinewindow.php:340 <div class="queCard" id="machine1ID774"><div class="queCardTitle" id="Titlemachine1ID774">…</div><div class="queCardBody" id="Bodymachine1ID774">…</div><div class="queCardFooterW" id="queCardFooterWmachine1ID774">…</div></div>

machinewindow.php:343 update target updated: as

machinewindow.php:344 <div class="queCard" id="machine1ID775"><div class="queCardTitle" id="Titlemachine1ID775">…</div><div class="queCardBody" id="Bodymachine1ID775">…</div><div class="queCardFooterW" id="queCardFooterWmachine1ID775">…</div></div>

如console.log中所示，这里没有更新的div。如果我改为尝试updateTarget.outerHTML = inc [y] .html-那么我会在浏览器窗口中看到[object HTMLDivElement]。

我已经尝试了几次迭代-但对于为什么它不起作用我有些迷惑。 object.html是一个节点，但不会用replaceWith（）替换另一个节点；

我可能丢失了一些东西。

以下也是该request的constructElement函数。


function constructElement(element, styleClass, type, data)
    {
      var ele = document.createElement(element);
        ele.setAttribute("class", styleClass);
        ele.setAttribute("id", type);
        ele.innerHTML = data; 
        return ele;
  }

Answer 1

如果您想使用updateTarget.replaceWith(inc[y].html);
将335行替换为：
var updateTarget = $(current[y].target);
因为replaceWith是一种jQuery方法，应该应用于jQuery对象。

如果您更喜欢使用outerHTML，请确保右侧具有HTML字符串（而不是节点），例如：
updateTarget.outerHTML = "<div>blah blah</div>";

或您的情况：
updateTarget.outerHTML = inc[y].html.outerHTML;

希望有帮助。

带有externalHTML并带有replaceWith（）的“对象HTMLDivElement”什么也不做

1 个答案: