是否可以将 domparser 元素更改为字符串？答案

【问题标题】：Is it possible to change domparser element to string?是否可以将 domparser 元素更改为字符串？
【发布时间】：2020-02-19 14:48:06
【问题描述】：

我有一些 HTML 字符串。使用 domparser 更新一些值，现在我需要用更新的值返回 HTML 字符串格式... Bcoz 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)

谢谢，

Gopal.R

【问题讨论】：

"Bcoz document.write 只接受字符串。" 使用document.write 几乎总是不好的做法。为什么你认为你需要？
@T.J.Crowder 我同意，有没有可用的选项让我知道，这是来自 api 的支付网关集成 html 一些元素值在渲染之前被加密，我需要解密替换它，它会自动进入 paytm 屏幕。
element1.appendChild(element2.outerHTML);

标签： javascript document domparser document.write

【解决方案1】：

Bcoz document.write 只接受字符串。

使用document.write 几乎总是不好的做法。

但是，如果出于某种原因你真的需要，你从parseFromString 得到的是Document object。它有一个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;
}

【讨论】：

document.body.appendChild(parsedHtml.documentElement);我收到此错误 TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'。在 KYCDemantAcOpenComponent.js:105
@Kitta - 这很奇怪，但请看我使用孩子的现场示例。无论如何，这可能是您想要的。（我害怕跑出大门，希望这会有所帮助。）
@TJ 检查一个我希望它会尽快更新你。
developer.mozilla.org/en-US/docs/Web/API/XMLSerializer 将是另一种选择。
@T.J.Crowder 谢谢哥们。它的工作很酷。 document.write 只有我用过。