HTMLを関数化？したい

前提・実現したいこと

こんにちは。よろしくお願い致します。m(_ _)m
HTMLのコードをjavascriptの関数のように別のところにまとめたいです。
例えば、

<div> <h1>TEST h1</h1> <p>TESTの中身です</p> </div>

というHTMLのコードがあった時、

<div> Aを呼び出し </div>
---以下Aの中身---
<h1>TEST h1</h1> <p>TESTの中身です</p>

DOMのinnerHTMLを試してみたのですが、改行を含むことができません。
HTMLの中身をそのまま別のところに置いて、コードを整理することは可能なのでしょうか？

変な質問かとも思いますが、どうぞよろしくお願い致します。m(_ _)m

追記：
ただ作るだけであればAtomなどで折りたたんだりできるのですが、今回はhtmlを生成する言語のようなものを制作中のため上の問題が出てきたことを申し添えます。

miyabi_pudding

2018/10/14 23:18

これだと、正確な回答得られないかと・・・。その、HTMLを生成する言語のようなものが、なんなのか、答えていただいたほうが、よりいいかと思います。Gulpなのか、たんにPHPで、他のPHPを読み込むのか、はたまた、他のプログラム言語で吐き出しするのか生成するのか、というか、Movable TypeなどのCMSの類なのか。そこらへんを明確にお願いします。そして、モダンなHTMLとして、templeteという機能もあったりするので。

masafuro

2018/10/15 00:09 編集

コメントありがとうございます。何分、そちらはHTMLとjavascriptで書かれたmameblockというマイナーなものでしたので通じないと思い省略致しました。申し訳ありません。templateは初耳でした。これでいけるかもしれません。

miyabi_pudding

2018/10/15 06:27 編集

このサイトなら、どんなマニアックな言語でも、だれか彼かご存知ですよ～。おお・・・templete使ってみるのですね・・・。モダンブラウザでもあまり多くのブラウザはまだサポートしていないので、ご注意ください。

masafuro

2018/10/15 06:34

miyabi_takatsukさん、ありがとうございます。おかげで解決できたようです。大変勉強になりましたm(_ _)m

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

回答2件

ベストアンサー

HTMLのdiv要素の中身を置き換えることはjavascriptでも出来るよ。多分改行も残る(見た目では残らないけど、それは素のHTMLでも同じ)。

html
1<!doctype html>
2<html lang="ja">
3<head>
4</head>
5<body>
6<div id="from_template">
7</div>
8<script>
9document.querySelector("#from_template").innerHTML="<h1>TEST h1</h1>\n<p>TESTの中身です</p>"
10</script>
11</body>
12</html>

投稿2018/10/14 16:14

wwbQzhMkhhgEmhU

総合スコア343

masafuro

2018/10/14 23:59 編集

うまく意図をお伝えできずすみません。javascript内に改行（\nではなく表記上の改行）を含むことができないため、innerHTMLでは、 xxx.innerHTML = " <h1>TEST h1</h1> <p>TESTの中身です</p> ” という表記ができずに困っていた次第です。ちょっと解決しそうにないので、DOMから別の方法で登りたいと思います。解答いただきありがとうございましたm(_ _)m

wwbQzhMkhhgEmhU

2018/10/15 00:10

そういう意味だったのか。それは知らないですね。言語と言ってた理由も分かりました。てっきりよく分からず聞いているのかと勘違いしました。すみません。

masafuro

2018/10/15 06:31

ありがとうございました。おかげで別の方法ですが解決しましたので、書いておきますm(_ _)m

wwbQzhMkhhgEmhU

2018/10/15 07:16

おめでとうございます

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

miyabi_takatsukさんのアドバイスでtemplateを使ったらできました。ありがとうございますm(_ )m
wwbQzhMkhhgEmhUさんも話を聞いていただき、ありがとうございましたm( _)m

以下のようにやりました。

<div> <h1>TEST h1</h1> <p>TESTの中身です</p> </div>

というHTMLのコードがあった時、

<div id="hoge"> </div>  <template id="temp"> <h1>TEST h1</h1> <p>TESTの中身です</p> </template>  <script> function() { var template = document.getElementById("temp"); var clone = document.importNode(template.content, true); document.getElementById('hoge').appendChild(clone);}); </script>

投稿2018/10/15 06:31

編集2018/10/15 06:40

masafuro

総合スコア19