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); })()La especificación JS dice que no puedo acceder al .outerHTML de un elemento mientras no esté adjunto al cuerpo del DOM y, de hecho, aparece un error al intentar establecer el .outerHTML.
Asi que:
document.getElementById("theTable").appendChild(insertTR); insertTR.outerHTML = insertTR.outerHTML.replace("{{row_id}}","myRowId"); Eso funciona bien para encargarse de la etiqueta {{row_id}} de TR, pero ahora, mi casilla de verificación previamente marcada ahora está desmarcada .
Los documentos de Mozilla ( https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML ) dicen:
"Establecer el valor de HTML exterior reemplaza el elemento y todos sus descendientes con un nuevo árbol DOM construido analizando la cadena html especificada".
Entonces, ¿cómo puedo lograr esto?
Reemplace la cadena del HTML antes de convertirlo en un elemento y agréguelo. –
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); })()