JavaScriptでHTMLを書き換える方法

Question

###前提・実現したいこと
画面幅768px以下の場合に、
JavaScriptでHTMLを書き換えたいのですが、
JavaScriptの書き方を教えて下さい。

<div id="aaa"> ↓ <div id="aaa_sp"> こんな感じです。

また、768px以上の場合にはまた「元に戻す」というように
したいです。

以下のコードを試しましたがうまく変わってくれませんでした。

$(function() {
    var display = function(){
    	var x = 769;
        var ws  = window.innerWidth;
        if (x <= ws ) {
          document.getElementById('aaa').innerHTML = '<div id="aaa">';
        } else{
          document.getElementById('aaa').innerHTML = '<div id="aaa_sp">';
        }
    }
});

よろしくお願いします。

###追記
皆さま、たくさんのご回答をいただいてありがとうございます。
おひとり一人にちゃんとお礼とお返事をしたいところですが、
本日、土曜日のため帰宅しなければならず、週明け
改めてご返信させていただきたく思います。

教えていただいたコードですが、書き換えがうまくいっておりません。
実はスライダーの部分になりまして、ここにsimplyscrollという
スクリプトにも指定してあるせいでしょうか。

時間がなく他の箇所を使ってテストできていなく
申し訳ございませんが・・・

実際のHTMLで書きますと、

<div id="slidePosts"> と書いています。 F12で見ますと、 <div id="slidePosts" class="simply-scroll-list" style="width: 4000px;"> となっています。

やはりそれが原因なのでしょうか。

すみません。一旦失礼させていただきまして、週明けにまた
続きを行っていきます！

よろしくお願いします。

Comments

[sousuke]

上記のコードしか無いのですか？イベントのトリガーが記述されていません、実際に提示のコードを動かす部分も提示してください。

Answer 1

幅を見てクラスを切り換えるならcss側のメディアクエリで解決したほうがいいと思います。

Comments

[lingwood]

sousuke 様
お世話になります。
先日はご回答ありがとうございました。
結局書き換えができず、CSSアニメーションで対応いたしました。
親身ご回答をいただいて、
ありがとうございました。

Answer 2

皆さま、色々な角度から解決方法を教えて頂いて、ありがとうございました。
当該の部分ですが、理由は分からずですが書き換えがうまくできず、
苦戦しましたが、結局CSS animationで解決を図りました。

バタバタしていてレスポンス悪く、大変失礼いたしました。

親身ご相談に乗って下さった皆さま、本当にありがとうございました！

Answer 3

こんにちは。

やり方はひとつではないと思いますが、以下のようなものでしょうか?

https://jsfiddle.net/jun68ykt/9rupgLt2/1/

ウィンドウの幅を変えると色が変わります。

参考になれば幸いです。

Comments

[lingwood]

jun68ykt　様

御礼が遅くなりまして、失礼いたしました。
先日はご回答ありがとうございました。
教えていただいたコードを元に書いてみましたところ、
上手くいきそうだったのですが、応用した際の書き方が悪かったためか、
他のdivにまで影響してしまい、レイアウトがくずれてしまったため、
一旦、CSSアニメーションで対応いたしました。

せっかく教えていただいたのに、すみません。
ですが、いろいろなアプローチの仕方があると大変勉強になりました。

また時間がある時に復習してみたいと思います。

Answer 4

setAttributeメソッドを使用すれば設定可能です。

$(function() {
  var display = function(){
    var x = 769;
    var ws  = window.innerWidth;
    if (x > ws) {
      document.getElementById('aaa').setAttribute("id","aaa_sp");
    }else{
      document.getElementById('aaa_sp').setAttribute("id","aaa");
    }
  }
});

ただ今回はjQueryを入れていますから、attrメソッドを使用した以下の方がいいでしょう。

$(function() {
  var display = function(){
    var x = 769;
    var ws  = window.innerWidth;
    if (x > ws) {
      $('#aaa').attr("id","aaa_sp");
    }else{
      $('#aaa_sp').attr("id","aaa");
    }
  }
});

しかしもしCSSを切り替えたりしたい場合はsousuke様が仰るようにCSSだけで解決する方がいいと思いますし、

百歩譲ってクリックイベント等に対応させたい場合だとしても、idではなくclassの方を変更した方がいいと思います。

Comments

[namnium1125]

私の場合はプロパティとしてではなく属性として操作しています。

プロパティをいじるか、属性をいじるかというのは、同じようで地味に違うようですね。

[lingwood]

namnium1125　様

御礼が遅くなりまして、失礼いたしました。
先日はご回答ありがとうございました。
教えていただいた通りに書いてみたのですが書き換えが
効かず、CSSアニメーションで対応いたしました。

恐らくスライダーに指定しているからと推察いたしますが・・・

また、idとclassですがclassの方が良いのですか？
無知ですみません。

もし気が向いたら教えていただければと思います。

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

[namnium1125]

絶対にダメ、というわけではないです。ただ、体感的なものですけど、要素固有の値をコロコロと変えるのはどうかなという話です。

cssを変更する以外の目的がidにないならば構わないのですが、変えてしまうということは、別な場所でその固有の要素を取得しにくくなるということですから、もしcss以外の面(例えばinnerHTMLを変更したり)で使用することがあるならば出来るだけ避けるべきだと思います。

また、同じhtml内で後から使い回したり、別なページとcssを共有しにくくなるという問題もあります。

一方、classの場合なら特に気にすることなく変更できます。idさえ変わらなければその要素は取得できるからです。

さらにclassは一つの要素で複数持つことができますから、指定するcssをclassごとに分け、変えたいスタイルに該当するもののみつけたり外したりするなんてことが可能です。

ですからもしcssを変更することだけが目的ならば、classの方が柔軟に対応できますので、classで済むならその方がいいのでは、という持論です。ぶっちゃけ根拠というほどのものはないです。

余談ですが、id、class両方を指定した要素で、id、classそれぞれのcssがぶつかった場合、優先されるのはidです。ですからそれを見越してidを変更する、というのならある意味良いテクニックかもしれません。

[namnium1125]

今更ながら読み返してみるとすごい長文な返信ですね。なんかすみません。。(^ ^;

また今更ながら思ったことを返信してみます。

jsが効かなかった理由ですけど、display関数の実行タイミングが不明という点が引っかかります。

プラグインを入れてらっしゃるみたいですね？スライダーに勝手にclassが付加されているのはそれによるものでしょう。これはおそらく問題ないです。

display関数自体がもし実行されていないようでしたら、display();を一番下の}と)};の間に入れてみるとうまくいくかもしれません。

ただdisplay関数がプラグインから実行されるものなのだとするとちょっと今の状況からではわからないです。

まぁCSSで上手くいったのでしたら下手にいじることはありませんから、参考程度にお願いします。(また長文になってしまった...orz)

[lingwood]

namnium1125　様
おはようございます。親身に考えて下さり、本当にありがとうございます。
拝読させていただきまして、CSSの部分良く理解できました。
class < idの性質を活かして、という点ではご指摘の通り実はそこまで考えてやって
いたものではなくて、ご説明を伺ってそういう方法も試行できたなぁ・・・と
気づかされました。
多角的に考え、ご指摘いただきありがとうございました。
またの際にも何卒よろしくお願い致します。

Answer 5

同じコード書いてたので、却下します。（爆）

Comments

[lingwood]

kako_mirai　様
お気持ちだけでありがたく思います。
またの機会にもよろしくお願い致します。

Answer 6

こんな漢字かな

if (x <= ws ) {
    document.getElementById('aaa_sp').id = "aaa";
} else {
    document.getElementById('aaa').id = "aaa_sp";
}

Comments

[lingwood]

hichon 様
お世話になります。
先日はご回答ありがとうございました。
教えていただいたコードでやってみたのですが、
結局書き換えができず、CSSアニメーションで対応いたしました。
やはり追記したように他のスクリプトと同時指定にすると
難しいのでしょうか。
ひとまずはCSSで何とかなっており、
遅ればせながらご回答をいただきましたこと、
本当にありがとうございました。
次の機会もありましたら是非またよろしくお願い致します。