带有 outerHTML 和 replaceWith() 的“object HTMLDivElement”啥都不做

Posted 2023-05-07

【中文标题】带有 outerHTML 和 replaceWith() 的“object HTMLDivElement”啥都不做

【英文标题】："object HTMLDivElement" with outerHTML and with replaceWith() does nothing带有 outerHTML 和 replaceWith() 的“object HTMLDivElement”什么都不做

【发布时间】：2020-04-10 09:29:36

【问题描述】：

我很困惑为什么这会失败。 我正在尝试用 jquery 中的 replaceWith 直接完全替换 DIV。

我尝试了很多变体，但都没有更新。或者如果我尝试使用 outerhtml [object HTMLDivElement] 而不是 html。 （这意味着我肯定会使用节点，对吗？这意味着 replaceWith() 应该可以工作？）。

我正在遍历当前显示的“cardObjects”数组，并将其与结构相同的传入数组（它是一个排序的有序列表）进行比较。 object's.html 是节点元素。并且 object's.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() 替换另一个节点；

我可能错过了什么。

下面还有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;
  

【问题讨论】：

请提供constructElement的代码

是的，它只是一个构造函数来抽象一些香草。 ```函数constructElement（元素，styleClass，类型，数据） var ele = document.createElement（元素）； ele.setAttribute("class", styleClass); ele.setAttribute("id", type); ele.innerHTML = 数据；回电； ```

【参考方案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;

希望对你有帮助。

【讨论】：

语法也被修正为正确......然后之后的几个变体都不起作用......但仍然如此。