HTML内にJavaScriptを記述して「JavaScript製の広告タグ」を呼び出したい

WordPressにショートコードという「ショートコードを記述した場所に、広告コードなどを挿入できる」機能があります（1.HTML部分に［ad1］などと記述しておき　2.別部分に広告コードなどを記述　3.ブラウザで表示すると［ad1］部分に広告が表示される）。

これをHTML内にJavaScriptを記述して実現したいと考えています。

body内にショートコードのような物を記述
body内もしくはhead内にJavaScriptを記述（JavaScript部分に広告コードなどを記述）
ブラウザで表示するとショートコード部分が広告コードなどに置き換えられる
（JavaScript部分の内容を書き換えれば、ショートコードのような物を記述した部分全てが書き換えられる）

このようにしたいと考えております。

試して上手くいかなかったコード

次のようなHTMLを作成してみましたが、上手くいきませんでした。

HTML
1
2<html>
3<body>
4
5<div id="kokoku"></div><!-- ショートコード部分 -->
6
7<script>
8var ad=document.creatElement("script");
9var code=document.createTextNode("●");<!-- ●にJavaScript製の広告タグを挿入 -->
10var kokoku=document.getElementById("kokoku");
11kokoku.appendChild(ad);
12ad.apppendChild(code);
13</script>
14
15</body>
16</html>

調べて作っては作成しているのですが、上手く行かず混乱しています（なぜ上手く行かないのかがわからない＾＾；）。

お手数をおかけしますが、可能でしたらお答え頂けると嬉しいです。

よろしくお願い致します。

追記：環境

■jQueryはWeb上のモノなら利用可能

jQueryは<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>のように、Web上にあるモノは読み込めますが、ダウンロードしたjQueryをサーバーにアップしての利用は“できない”環境です。

■サーバーにファイルをアップロードできない

無料サービスで、今回のことを実現したいのですが、目的のサービスではJavaScriptなど含め基本的にサーバーにファイルをアップロード“できない“環境です。

NozomuIkuta

2018/11/12 05:03

jQueryを使えない環境ですか？

shinsukes

2018/11/12 08:17

Web上にあるjQueryを読み込むことは可能ですが、ダウンロードしたjQueryをサーバーにアップして利用は“できない”環境です。（ご返信ありがとうございますっ）

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

回答1件

ベストアンサー

ソースコードに一部間違いがあるようです。

creatElementはスペルミスで、正しくはcreateElementです。
document.createElementメソッドの返り値はElementクラスのインスタンスであり、appendChildメソッドを持ちません(appendChildメソッドはNodeクラスのメソッドです)。Elementクラスではappendメソッドです。
script要素にJavaScriptのコードを設定する場合、createTextNodeで生成したテキスト要素をscript要素に追加するのではなく、script要素のtextContentを設定します。

質問しておいてなんですが、jQueryは使ってないです。
あしからず。

HTML
1<div id="kokoku"></div><!-- ショートコード部分 -->
2
3<script>
4var kokoku = document.getElementById("kokoku"); // ショートコードに相当する要素を取得
5
6var ad = document.createElement("script"); // script要素を生成
7ad.textContent = "console.log('Hello, Ads!')"; // コード設定
8
9kokoku.append(ad); // ショートコードに相当する要素の子要素としてscript要素を追加
10</script>

DOMにscript要素が挿入されると、そのtextContentの内容がJavaScriptコードとして実行されます。この例では、'Hello, Ads!'がコンソールに表示されます。

投稿2018/11/12 08:39

編集2018/11/12 08:40

NozomuIkuta

総合スコア1260

shinsukes

2018/11/13 04:57

詳しい回答ありがとうございますっ。スペルミス（汗）。教えていただいた内容を学んで、挑戦してみます。

NozomuIkuta

2018/11/13 05:19

解決できそうでよかったです。スペルミスについて、`Uncaught TypeError: document.creatElement is not a function`といった文言がコンソールに表示されていませんでしたか？`creatElement`というメソッドがないためのエラーです。エラーも確認するようにすると間違いに気付きやすくなると思います。

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