wordpressにて、htmlの書き換えを行いたいと思います。

こんにちは。
wordpressにてjavascriptを使用し、<div>で囲った中身を書き換えたいと考えています。

<script>
jQuerywin.on('load resize', function() {
  var windowWidth = window.innerWidth;

  if (windowWidth > 600) {
    document.getElementById('target').innerHTML = '';
  }
});
</script>
```この`'';`の部分は、改行無しで入れなくては作動しないのでしょうか？

この部分には

      </table>

初心者な文章で申し訳ないのですが、よろしくお願い致します。

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

回答2件

ベストアンサー

javascriptでは'(シングルクォーテーション)で囲まれた文字列内では改行は基本的に使えません。
どうしてもやりたいなら、

javascript
1  document.getElementById('target').innerHTML = '\
2<p>タイトル</p>\
3        <table class="table" style="text-align:center;" cellspacing="0" cellpadding="8" width="100%">\
4...(中略)
5 </table>';

と、改行ごとに\マークを入れればいいのですが、おそらくこの「内容1～4」が長くて、現実的ではないですよね？

HTMLで、target部分にはあらかじめ表示したい内容を入れておいて、
style='display:none'を指定して非表示にして、

javascript
1if (windowWidth > 600) {
2 document.getElementById('target').style.display = 'block';
3}

で表示するというのはどうでしょうか？

投稿2017/07/19 07:08

zohnam

総合スコア1441

kinokomochi

2017/07/19 07:50

回答ありがとうございます。こちらのやり方でやったところ、表示されました！分かりやすく教えて頂きありがとうございました。

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

JavaScript
1var html = '<p>タイトル</p>\n        <table class="table" ・・・';
2document.getElementById('target').innerHTML = html;

のように、改行コード付きで1行で書けばきれいに出力できます。

var html = '<p>タイトル</p>
        <table class="table" ・・・';

のような書き方だとエラーになります。

また、このJavaScriptの記述を<head>内に書いていると、JavaScriptの動作時にはまだdocument.getElementById('target')が取得できない状態でこれまたエラーになると思いますので、

JavaScript
1window.onload = function() {
2    var html = '<p>タイトル</p>\n        <table class="table" ・・・';
3    document.getElementById('target').innerHTML = html;
4}