回答受付が終了しました

sab********

2022/5/20 11:00

22回答

jqueryで書いていたものをjsで書き直したかったのですが、タグもそのまま文字列で出力されてしまいます。 何が足りないのか教えてください。 ・jquery

jqueryで書いていたものをjsで書き直したかったのですが、タグもそのまま文字列で出力されてしまいます。 何が足りないのか教えてください。 ・jquery $(function () { const $targetElement = $('.js-ibunaisi'); const HtmlDoc = ` <h3>xxxxx</h3> <p>xxxxxxx</p> `; $targetElement.append(HtmlDoc); }); ・js $(function () { const targetElement = document.querySelector('.js-ibunaisi'); const HtmlDoc = ` <h3>xxxxx</h3> <p>xxxxxxx</p> `; targetElement.append(HtmlDoc); });

JavaScript | プログラミング・68閲覧

回答（2件）

0
ama********

カテゴリマスター

2022/5/20 16:28

>jqueryで書いていたものをjsで書き直したかったのですが、タグもそのまま文字列で出力されてしまいます。 >何が足りないのか教えてください。 Element.append() https://developer.mozilla.org/ja/docs/Web/API/Element/append ↑ザックリと説明するとElement.append()では文字列はDOMStringになる(つまり文字のまま)。 新規HTMLファイルを作成し、完全コピペで動作を確認して下さい。 https://ideone.com/LXtn4H 問題点としては、これはES6コードなので、クロスブラウザに対応したい場合はBabelなどでES5にコンパイルが必要になる(プロを目指すなら必須)。

ama********

2022/5/20 16:39

蛇足ですが CSS3もクロスブラウザに対応したい場合は、ベンダー･プレフィックスを付与しなければならない(プロを目指すなら必須)。 CSSプロパティのvalue名が違う場合も有り、人力では無理なので、ベンダー･プレフィックス用のツールが必要。

0
ybb********

カテゴリマスター

2022/5/20 13:59

sab********さん >････jqueryで書いていたものをjsで書き直した･･･････ ご参考に↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> <div class='js-ibunaisi'>この後に表示</div> <script> /* $(function () { const $targetElement = $('.js-ibunaisi'); const HtmlDoc = ` <h3>xxxxx</h3> <p>xxxxxxx</p> `; $targetElement.append( HtmlDoc ); }); */ const targetElement = document.querySelector('.js-ibunaisi'); var h3 = document.createElement('h3'); h3.innerText = "xxxx" ; targetElement.appendChild(h3); var p = document.createElement('p'); p.innerText = "xxxxxxx" ; targetElement.appendChild(p); </script> </body> </html>