是否有可能将 DOMParser 元素转换为字符串？

Question

是否有可能将 DOMParser 元素转换为字符串？

javascriptdocumentdomparserdocument.write

3

我有一些HTML字符串。使用DOM解析器更新一些值，现在我需要使用更新后的值返回HTML字符串格式，因为document.write只接受字符串。

请查看以下示例补丁：

const domName = 'MOBILE_NO';
// Below dom was getting from api.
const dom =  '<html><head><title>Merchant Checkout Page</title></head><body><center><h1>Please do not refresh this page...</h1></center><form method="post"  name="paytm_form"><input type="hidden" name="MOBILE_NO" value="xxxxxxxx"></form></body></html>';
const parser = new DOMParser();
const parsedHtml = parser.parseFromString(dom, 'text/html');
parsedHtml.getElementsByName(domName)[0].setAttribute('value', '1234567890');

// now i need to replace current update data entire screen
document.write(parsedHtml)

Thanks,

Gopal.R

- R.G.Krish

“因为document.write只接受字符串。” 使用document.write几乎总是不良实践。你认为你为什么需要使用它？ - T.J. Crowder

@T.J.Crowder 我同意，有没有可用的选项，请告诉我，这是来自API的付款网关集成HTML，一些元素值在呈现之前被加密，我需要解密并替换它，它将自动进入Paytm屏幕。 - R.G.Krish

element1.appendChild(element2.outerHTML); - degr

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- T.J. Crowder · Accepted Answer

因为document.write只接受字符串。

几乎总是不推荐使用document.write。

但是，如果由于某些原因您确实需要使用它，那么从parseFromString返回的是一个Document对象。它有一个单独的documentElement，您可以获取其innerHTML或outerHTML：

document.write(parsedHtml.documentElement.innerHTML);
// or
document.write(parsedHtml.documentElement.outerHTML);

实时示例：

const domName = 'MOBILE_NO';
// Below dom was getting from api.
const dom =  '<html><head><title>Merchant Checkout Page</title></head><body><center><h1>Please do not refresh this page...</h1></center><form method="post"  name="paytm_form"><input type="hidden" name="MOBILE_NO" value="xxxxxxxx"></form></body></html>';
const parser = new DOMParser();
const parsedHtml = parser.parseFromString(dom, 'text/html');
parsedHtml.getElementsByName(domName)[0].setAttribute('value', '1234567890');

// now i need to replace current update data entire screen
document.write(parsedHtml.documentElement.innerHTML);

但是，最好还是将其附加到页面上，例如：

document.body.appendChild(parsedHtml.documentElement);

现场示例：

const domName = 'MOBILE_NO';
// Below dom was getting from api.
const dom =  '<html><head><title>Merchant Checkout Page</title></head><body><center><h1>Please do not refresh this page...</h1></center><form method="post"  name="paytm_form"><input type="hidden" name="MOBILE_NO" value="xxxxxxxx"></form></body></html>';
const parser = new DOMParser();
const parsedHtml = parser.parseFromString(dom, 'text/html');
parsedHtml.getElementsByName(domName)[0].setAttribute('value', '1234567890');

document.body.appendChild(parsedHtml.documentElement);

或者循环遍历它并附加其子元素：

let child = parsedHtml.documentElement.firstChild;
while (child) {
    let next = child.nextSibling;
    document.documentElement.appendChild(child);
    child = next;
}

实时示例：

const domName = 'MOBILE_NO';
// Below dom was getting from api.
const dom =  '<html><head><title>Merchant Checkout Page</title></head><body><center><h1>Please do not refresh this page...</h1></center><form method="post"  name="paytm_form"><input type="hidden" name="MOBILE_NO" value="xxxxxxxx"></form></body></html>';
const parser = new DOMParser();
const parsedHtml = parser.parseFromString(dom, 'text/html');
parsedHtml.getElementsByName(domName)[0].setAttribute('value', '1234567890');

let child = parsedHtml.documentElement.firstChild;
while (child) {
    let next = child.nextSibling;
    document.documentElement.appendChild(child);
    child = next;
}