innerHTML上書き

Question

HTML 修正前

<h3 id="title"></h3>

HTML 修正後

<h3 id="title">
     <input type="text" id="×××"/>
     <select id="○○○"></select>
     <input type="button" id="△△△" value="表 示" />
     <input type="button" id="□□□"  value="非表示" /> 
</h3>

htmlの記述に上記のように修正があったのですが、javascript側でもともと

title.innerHTML = 選択日付 //日付が切り換えられる

という風に日付を入れる処理が記述されています。修正後のHTMLに記述されている要素を残したうえで、JSでの処理を生かしたいのですが何か方法はないでしょうか？

追記

<h3 id="title">yyyy年mm月dd日
     <input type="text" id="×××"/>
     <select id="○○○"></select>
     <input type="button" id="△△△" value="表 示" />
     <input type="button" id="□□□"  value="非表示" /> 
</h3>

Comments

[kei344]

具体的にどこに日付を入れる予定でしょうか。

[coko1]

追記しました。こういった回答で問題ないでしょうか？

Answer 1

とりあえず、下記コードで要件は満たせると思います。

document.getElementById('title').firstChild.data = 'yyyy年mm月dd日';'

ただし、見出しの中にボタンやセレクトボックスがあるのは論理構造上問題があるので、構造を見直すのが良いかと思います。

Re: coko1 さん

Comments

[coko1]

構造上問題があるんですね...
回答していただいたコードで画面上に日付とinnerHTMLを表示させることはとりあえずできるけどやめた方がいいってことですかね？

[think49]

そうですね。
h3要素は見出しを表す要素ですが、select要素や <input type=button> が見出しとして適切な要素でしょうか。
HTMLは論理構造を示すものですから、それが見出しである必要があると思います。

[coko1]

なるほど...
ありがとうございました。参考になりました。

Answer 2

個人的に平文とタグを同じ階層に書くことが好きてはないので、それは私の趣味ですけど笑。

なので、たとえば日付をspanタグで囲んでみるなどはどうでしょう。最初は空にしておいてあとからそのspanのinnerHTMLに日付を代入すれば動くかと思われます。

Answer 3

title.innerHTML = 当日日付 + title.innerHTML ;

または

title.innerHTML = title.innerHTML + 当日日付 ;

でどうでしょうか。

Comments

[coko1]

厳密には記述していなかったのですが、日付を切り替えられるのです。日付を切り替えた際に
title.innerHTML =　対応日付　となるのでその書き方だと難しくないでしょうか？

[namimon]

私も曖昧なまま進めてしまったのですが、
title.innerHTML これはdocument.getElementById("title");
で、
当日日付 これは日付処理を文字列にしたものという認識でよいでしょうか。

var inputForm = title.innerHTML ; //一旦変数に保存しておく
title.innerHTML = inputForm + 当日日付
でいかがでしょうか。