Q&A
そんなに言うほどないですか？
要件具体的にしたほうが良いです。
どこになにをどのようなタイミングで入れたいのか。
document.write()は非推奨であることがわかったのですが、これの代替となる方法が見つからない状況です。
以下の場合、htmlを全て書き換える処理となりますが、代替するメソッドとして記事内で紹介されていたinsertAdjacentHTMLメソッドはHTMLの一部を変更及び、追加するメソッドかと思います。
document.open() document.write('<p>テスト</p>'); document.close();
HTMLの一部ではなくdocument.write()のような全てのHTMLを書き換え、上書きする方法はありませんでしょうか。
どなたか、ご助言頂けましたら幸いです。
追記
document.write('<p>テスト</p>')こちらの部分なのですが、bodyの配下に追加するのではなく、HTMLを以下のように最初から書き換える方法がありましたら教えて頂けましたら幸いです。
document.write('<!DOCTYPE html><html lang="jp"><head>')
DOCTYPEや<html>も置き換えるとなるとけっこう面倒なコードになりますが、なぜそれらも置き換えたいのでしょうか? とくに利点はなさそうに思えます。
> DOCTYPEや<html>も置き換えるとなるとけっこう面倒なコードになりますが、なぜそれらも置き換えたいのでしょうか? とくに利点はなさそうに思えます。
こちらですが、具体的にはサーバー側からfetchしてきたresponse.text()のHTMLデータをそのまま現状のHTMLに上書きしたいと考えています
JavaScriptでやるような対応ではないです。
fetch できるのでしたら、そのURLにナビゲートしてしまえばよいのではないでしょうか。そのへんの事情も含めて、本当に解きたい問題を質問してみてください。
> そのURLにナビゲートしてしまえばよいのではないでしょうか
こちらですが、仕様上別のURLには遷移させずに上書きする形で対応したいのですよね...
なぜ私のコメントが無視し続けられるのが不明ですが、サーバーサイドで切り分ければ不可能ではないことはないです。
それもこれも内容次第。この質問内容では他者には判断不可能。
要件不明瞭な上に後出しでどんどん回答者の厚意と時間を奪っていってます。
どこになにをどのようなタイミングで入れたいのか。
DOCTYPEや<html>が入っていても documentElement.innerHTML でまあそれなりに動きますが、それではダメなんでしょうか? <script>は無視されますけども。
そもそもHTML全体をfetchするような妙な設計は変えられないのか?
元の文書とfetchした文書でDOCTYPEの有無や<html>の属性が変わることはあるのか?
<iframe>にロードしてはいけないのか?
などなど回答する上で知りたい情報がたくさんあります。
> DOCTYPEや<html>が入っていても documentElement.innerHTML でまあそれなりに動きますが、それではダメなんでしょうか? <script>は無視されますけども。
こちら「 document.documentElement.innerHTML = response.text() 」の形で試してみたのですが、「 [object Promise] 」と表示されるのみでHTMLデータは表示されませんでした...
なぜ私のコメントが無視し続けられるのが不明です。
初めからかなり、回答に必要な情報の追記を依頼してるはずなのですが。
進みませんよ。私が依頼した内容をきちんと追記しないと。
そりゃあ、response.text() の戻り値は文字列ではないので。https://developer.mozilla.org/ja/docs/Web/API/Body/text
なるほどです。
ありがとうございます。
以下の形にしましたら、解決しました。
response.text().then(text => {
document.documentElement.innerHTML = text
})
なぜ私のコメントが無視し続けられるのが不明です。明確な理由を教えて下さい。
それに「代わりとなる実装」を探してる時点でずれてます。やろうとしていることが非推奨。
それだけ悪影響な機能であったための非推奨なのに、実装を根本的に見直そうと思わないのか謎です。危ないアプリケーションを量産したいんでしょうか。なにかあったときに被害被るのはあなた自身ですよ。
回答3件
0
ベストアンサー
ぜんぶ書き換えたいのでしたら、
javascript
1document.documentElement.innerHTML = '<p>テスト</p>';
でいいかと思います。
投稿2021/02/15 02:56
総合スコア21927
0
bodyもしくは表示領域をきめて適当なidを振っておき
そのinnerHTMLを書き換えるか、HTML要素を削除した上でappendChildしてください
投稿2021/02/15 03:09
総合スコア117622
ご回答ありがとうございます。
>そのinnerHTMLを書き換えるか、HTML要素を削除した上でappendChildしてください
こちらですが、仮にサーバー側からfetchしてきたHTMLデータ「response.text()」をdocument.write()に入れていた場合に上書きすることは可能でしょうか?
書き換える領域がきまっているならfetchで取得したhtml(text)を利用して
全体を書き換えることは可能です。
ただfetchでapiたたいてhtmlを受け取るのは微妙ですね。
jsonなどもっと汎用的なデータをとったほうがよいような気がします
書き換える領域に関してなのですが今回は、サーバー側から、取得したHTMLテンプレートそのものにしたい為、response.text()の中身は「 <!DOCTYPE html><html lang="jp"><head><body> 」のような形で、<!DOCTYPE>の部分から書き換えたいと考えています。
実際に書き換えるとなった場合はどのような方法が考えられますでしょうか...?
bodyじゃなくてhtml全部を書き換えるとなると書き換えるためのプログラム自体が
競合しませんか？
そういう場合はかきかえるのではなくてページ遷移すべきでしょう
またどうしてもというならiframeなどで対応になるかと
document.writeが非推奨になってしまったの結構な痛手ですね...
何か別の方法がないか探ってみます
非推奨じゃなくても自分自身は書き換えられないですよ
document.write(response.text())こちらの形で試してみましたら、HTMLを上書き出来ましたよ
0
下記ではダメですか。
js
1document.body.insertAdjacentHTML('beforeend', '<p>テスト</p>');
追記
全て書き換えるなら、下記ですね。(int32_tさんの回答とほぼ同じです。)
js
1document.body.innerHTML='<p>テスト</p>';
投稿2021/02/15 03:07
編集2021/02/15 03:21
総合スコア34345
ご回答ありがとうございます。
> document.body.innerHTML='<p>テスト</p>';
こちら仮になのですが、body配下に設定するのではなく、「 <!DOCTYPE html><html lang="jp"><head><body>」といった形で要素を一から設定し直す方法はありませんでしょうか...?
あなたの回答
tips
プレビュー
