JavaScript ヘッダ部分をJavaScriptで出力させたい

前提・実現したいこと

JavaScriptでヘッダ部分を出力させたいのですがそのような事は可能でしょうか
document.write？append？innerHTML？可能なものなのでしょうか？

該当のソースコード

HTML
1document.write("<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2<html>
3<head>
4	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5	<meta http-equiv="Content-Style-Type" content="text/css">
6	<meta http-equiv="Content-Script-Type" content="text/javascript">
7		<meta name="description" content="">
8		<meta name="title" content="">
9	<title></title>
10	<link href="/style/font_win.css?" rel="stylesheet" type="text/css">
11	<link href="/style/style_minakoi.css?" rel="stylesheet" type="text/css">");

該当のソースコード

HTML
1test.innerHTML="<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2<html>
3<head>
4	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5	<meta http-equiv="Content-Style-Type" content="text/css">
6	<meta http-equiv="Content-Script-Type" content="text/javascript">
7		<meta name="description" content="">
8		<meta name="title" content="">
9	<title></title>
10	<link href="/style/font_win.css?" rel="stylesheet" type="text/css">
11	<link href="/style/style_minakoi.css?" rel="stylesheet" type="text/css">";

maisumakun

2020/07/16 01:20

何のためにそのようなことが必要となったのでしょうか？

jkut

2020/07/16 01:22

JavaScriptで全てのページ内容を仕上げられないかなと思いまして

jkut

2020/07/16 01:24

仮にできたとしてもSEO的にアウトになっちゃうんですかね

maisumakun

2020/07/16 01:24

それを呼ぶ<script>はどこに書くつもりでしょうか？

jkut

2020/07/16 01:26

外部ファイルです

maisumakun

2020/07/16 01:27

スクリプトの中身はいいのですが、それをどのようにしてブラウザから呼び出すのですか？

FrontEnd_Japan

2020/07/16 01:46

クローリングされるかされないかで言うとSEO的にはアウトです。

miyabi_pudding

2020/07/16 02:13 編集

FrontEnd_Japanさん > 一応、現代では、クローリングロボットもJavaScriptを実行できるため、実行後のWebページも評価されます。 title要素やその他の要素も評価対象かと。おそらく、フロントエンドフレームワークによるSPAの台頭に対応した措置かと思われます。（ただしページ履歴を正当に制御したものに限ると思われる。また、その上でスパム対策は行われていると思われる）ですが、質問のコードだと、それ以前の問題ではありますが・・・。

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

回答3件

javascriptには要素を追加する関数が用意されているので、
headerのDOMを格納しているJSファイルを作成すればいけます。
タイミングとしては初期レンダリング時でも良いと思います。

lang="html"
1<div class="js-header">
2  この中に<header>が展開される様に実装します。
3</div>

投稿2020/07/16 01:51

FrontEnd_Japan

総合スコア271

できないとは言いませんが、動作が安定するかは微妙です。
DOCTYPEのような基本で重要な要素はスタティックにHTML側で吐くか
サーバーサイドのプログラムで付加してください

投稿2020/07/16 01:50

yambejp

総合スコア116724

html
1<head id="headId"></head>
2
3<script>
4	var headTxt = `
5	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6	<meta http-equiv="Content-Style-Type" content="text/css">
7	<meta http-equiv="Content-Script-Type" content="text/javascript">
8		<meta name="description" content="">
9		<meta name="title" content="">
10	<title></title>
11	<link href="/style/font_win.css?" rel="stylesheet" type="text/css">
12	<link href="/style/style_minakoi.css?" rel="stylesheet" type="text/css">");
13	`
14	let head = document.getElementById("headId")
15	head.innerHTML = headTxt
16	let _meta = document.createElement("meta")
17	_meta.httpEquiv = "Content-Style-Type"
18	_meta.content = "text/css"
19	head.appendChild(_meta)
20	let _meta2 = document.createElement("meta")
21	_meta2.httpEquiv = "Content-Script-Type"
22	_meta2.content = "text/javascript"
23	head.appendChild(_meta2)
24	let ch_meta = document.createElement("meta")
25	ch_meta.name = "description"
26	ch_meta.content = ""
27	let ch_meta2 = document.createElement("meta")
28	ch_meta2.name = "title"
29	ch_meta2.content = ""
30	_meta2.appendChild(ch_meta)
31	_meta2.appendChild(ch_meta2)
32	let title = document.createElement("title")
33	head.appendChild(title)
34	let _link = document.createElement("link")
35	_link.href="/style/font_win.css?"
36	_link.rel="stylesheet"
37	_link.type="text/css"
38	let _link2 = document.createElement("link")
39	_link2.href="/style/style_minakoi.css?"
40	_link2.rel="stylesheet"
41	_link2.type="text/css"
42	head.appendChild(_link)
43	head.appendChild(_link2)
44	
45</script>