jQueryを利用した要素の追加の方法

jQueryなどを利用してこちらのスマホサイトのように

<header>...</header>を既存のページに追加したいです。当方もこちらと同じように下に出るドロワーを使用しているため ifreamではなくjQueryなどを使用したいです。

楽天rmsのデフォルトでは

のため

となるような方法を教えていただきたいです。

jsビギナーのため具体的なソースなども教えていただける方がいらっしゃいましたら
どうぞよろしくお願いいたします。

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

回答2件

JavaScript
1jQuery(function($) {
2  // headerの内容を作成
3  var header = $("<header><ul><li>あ</li><li>い</li></ul></header>");
4  // 作成したheaderを挿入
5  $("main").prepend(header);
6});

投稿2018/10/02 07:36

root_jp

総合スコア4666

読み込み時に固定のヘッダーファイルを読み込んで、表示するだけであれば、
ヘッダーのHTML部分だけを別ファイルにして、jQueryで読み込ませばいいのでは？

HTML
1<body>
2    ～中略～
3    <main>...</main>
4    <script>read_header();</script> <!-- header部読み込み -->
5    <footer>...</footer>
6    ～中略～
7</body>

JQuery
1function read_header()
2{
3	$.ajax({
4		type: "POST",
5		url: './js/html/header.html',
6		async: false,
7		dataType: 'html',
8		timeout: 3000
9	}).done(function(data){
10		document.write(data);
11	}).fail(function(data){
12		console.log('error',data);
13	}).always(function(data){
14	});
15}