Можно ли изменить элемент domparser на строку? - PullRequest
Новая
       83

Можно ли изменить элемент domparser на строку?

0 голосов
/ 19 февраля 2020

У меня есть строка 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)

Спасибо,

Гопал.R

1 Ответ

2 голосов
/ 19 февраля 2020

Bcoz document.write принимает только строку.

Использование document.write почти всегда является плохой практикой.

Но , если для некоторых причина, по которой вам действительно нужно, то, что вы получаете от parseFromString, это Document объект . Он имеет один documentElement, который вы можете получить innerHTML или outerHTML из: 

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

Live Пример: 

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);

Live Пример: 

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);

или l oop через него и добавление его потомков: 

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

Live Пример: 

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;
}
...