"object HTMLDivElement" 使用 outerHTML 和使用 replaceWith() 什么都不做
"object HTMLDivElement" with outerHTML and with replaceWith() does nothing
我对失败的原因感到困惑。
我正在尝试直接用 jquery.
中的 replaceWith 完全替换 DIV
我试过很多变体,但要么什么都没有更新。或者如果我尝试使用 outerhtml [object HTMLDivElement] 而不是 html。 (这意味着我确定使用节点,对吗?这意味着 replaceWith() 应该工作?)。
我正在遍历当前显示的数组 'cardObjects',并将其与结构相同的传入数组(它是一个排序的有序列表)进行比较。 object's.html 是节点元素。并且对象'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 - 然后我在浏览器 window.
上得到 [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;
}
如果你想使用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;
希望对您有所帮助。
我对失败的原因感到困惑。 我正在尝试直接用 jquery.
中的 replaceWith 完全替换 DIV我试过很多变体,但要么什么都没有更新。或者如果我尝试使用 outerhtml [object HTMLDivElement] 而不是 html。 (这意味着我确定使用节点,对吗?这意味着 replaceWith() 应该工作?)。
我正在遍历当前显示的数组 'cardObjects',并将其与结构相同的传入数组(它是一个排序的有序列表)进行比较。 object's.html 是节点元素。并且对象'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 - 然后我在浏览器 window.
上得到 [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;
}
如果你想使用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;
希望对您有所帮助。