时间戳

首页 > 解决方案 > "object HTMLDivElement" with outerHTML and with replaceWith() does nothing

javascript - "object HTMLDivElement" with outerHTML and with replaceWith() does nothing

问题描述

I'm confused as to why this is failing. I'm trying to directly replace a DIV completely with replaceWith from jquery.

i've tried bunch of variation, but either nothing gets updated. or if i try outerhtml [object HTMLDivElement] instead of the html. (which means I'm for sure working with a node, right? which means replaceWith() should work?).

I'm iterating through an array of currently displayed 'cardObjects', and comparing it to an identically structured incoming array (it's a sorted ordered list). the object's.html is the node element. and the object's.target is pointing to the element's 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]);

                }

the console.log output is:

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

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

machinewindow.php:339 new html

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

machinewindow.php:343 update target updated: as

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

here as shown in the console.log we get no updated div. if i instead try updateTarget.outerHTML = inc[y].html - then I get [object HTMLDivElement] on the browser window.

I've tried a few iterations - and I'm a bit lost as to why this isn't working. the object.html is a node, but won't replace another node with replaceWith();

I'm probably missing something.

also below is that constructElement function by request.


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

标签： javascriptarraysdomreplacewithouterhtml

解决方案

If you want to use updateTarget.replaceWith(inc[y].html);
replace your line 335 with:
var updateTarget = $(current[y].target);
as replaceWith is a jQuery method and should be applied to jQuery object.

If you prefer using outerHTML, make sure you have a HTML string (not a node) on the right side, e.g.:
updateTarget.outerHTML = "<div>blah blah</div>";

or in your case:
updateTarget.outerHTML = inc[y].html.outerHTML;

Hope it helps.

推荐阅读