设置.outerHTML将清除所有.inerHTML元素内容

Question

HTML:

<tr id="row1" data-Source="{{row_id}}">
<td><input id="chk1" class="chk" type="checkbox"></td>
<td><input id="chk2" class="chk" type="checkbox"></td>
<td><input id="chk3" class="chk" type="checkbox"></td>
</tr>

JavaScript:

(() => {


document.getElementById("chk1").checked = true;

let insertTR = document.getElementById("row1").cloneNode(true);

let elems = insertTR.querySelectorAll(".chk");

for (let i = 0; i < elems.length; i++) {
elems[i].checked = true;
}

document.getElementById("theTable").appendChild(insertTR);

})()

JS规范说，当元素的.outerHTML没有附加到DOM主体时，我无法访问它，事实上，我在尝试设置.outerHTML.时遇到了一个错误

因此：

document.getElementById("theTable").appendChild(insertTR);
insertTR.outerHTML = insertTR.outerHTML.replace("{{row_id}}","myRowId");

这可以很好地处理TR的{{row_id}}标记，但现在，我以前选中的复选框现在被取消选中了。

Mozilla文档(https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML)比如：

"；设置outerHTML的值会将元素及其所有子代替换为通过解析指定的htmlString构建的新DOM树">

那么，我该如何做到这一点呢？

Answer 1

在将HTML字符串制作成元素并附加之前，请替换它。–

function elemFromString(html) {
var dummy = document.createElement("div");
dummy.innerHTML = html.trim();
if (dummy.children.length > 1) {
console.error("expecting one wrapping element for html. will return only firstChild")
}
var result = dummy.firstChild;
result.parentNode.removeChild(result)
return result;
}

(() => {
document.getElementById("chk1").checked = true;
let insertTR_html = document.getElementById("row1").outerHTML;
insertTR_html = insertTR_html.replace("this", "that");
let insertTR = elemFromString(insertTR_html);
let elems = insertTR.querySelectorAll(".chk");
for (let i = 0; i < elems.length; i++) {
elems[i].checked = true;
}
document.getElementById("theTable").appendChild(insertTR);
})()

Answer 2

最后，我决定采用这种方法：

let insertTR = document.getElementById("row1").cloneNode(true);
insertTR.setAttribute("data-Source","myRowId")

通过.setAttribute()设置属性，而不是尝试操作其.outerHTML。

现在工作正常。