javascriptへのhtmlの記述方法

javascriptへのhtmlの記述方法に関する質問です。

javascript上に直接htmlを記述する場合、

javascript
1
2window.headerHTML = '<!DOCTYPE html>' + '<html lang="ja">' + '<head>' + '<meta http-equiv="X-UA-Compatible" content="IE=edge">' + '<meta charset="utf-8" />'
3                      + '<meta name="viewport" content="width=device-width,initial-scale=1">' + '<link href="../css/stylesheet.css" rel="stylesheet" type="text/css">'
4                      + '<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">'
5                      + '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>'
6                      + '<script type="text/javascript" src="../js/main.js"></script>'
7                      + '<title>タイトル</title>' + '</head>';
8
9window.bodyHTML = '<body>' + '</body>'
10
11window.footerHTML = '</html>';
12
13window.HTML = window.headerHTML + window.bodyHTML + window.footerHTML;
14

このように記述することでうまくいきますか？

ご回答のほどよろしくお願いいたします。

退会済みユーザー

2019/02/05 14:06

試せばわかることだと思うのですが、質問の意図はなんですか？

maisumakun

2019/02/06 00:44

どういったことをしようとしているシチュエーションなのでしょうか。

行動規範の内容に同意します

回答2件

いきませんね。。windowの使い方が間違っているように思えます。
windowの使い方については以下が参考になります。
window

まずは自分で試してみるのがいいかと思います。
JavaScriptを動かせる環境がないのであればcodepenのようなところで試してみるのがいいですよ。

投稿2019/02/05 23:47

unotalk

総合スコア124

それをどこから呼び出すつもりかによるでしょうね
htmlタグの外側から自分自身を呼び出すつもりならその記述ではおかしいでしょう
別windowに呼び出すなら近い書き方で書けますが「</script>」があると
jsは終了してしまうので、ちょっとした工夫が必要

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  document.querySelector('#btn').addEventListener('click',function(){
4    var headerHTML=`
5<!DOCTYPE html>
6<html lang="ja">
7<head>
8<meta http-equiv="X-UA-Compatible" content="IE=edge">
9<meta charset="utf-8" />
10<meta name="viewport" content="width=device-width,initial-scale=1">
11<link href="../css/stylesheet.css" rel="stylesheet" type="text/css">
12<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
13<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></`+`script>
14<script type="text/javascript" src="../js/main.js"></`+`script>
15<title>タイトル</title>
16</head>
17`;
18    var bodyHTML = '<body></body>';
19    var footerHTML = '</html>';
20    nWin=window.open("","");
21    nWin.document.write(headerHTML);
22    nWin.document.write(bodyHTML);
23    nWin.document.write(footerHTML);
24  });
25});
26</script>
27<input type="button" id="btn" value="open">