divにinnerHTMLでセットすると一行分HTMLに表示されてしまう

解決済

質問者：bobo39
質問日時：2008/10/02 21:54
回答数：5件

divにinnerHTMLでセットすると一行分HTMLに表示されてしまう

Javascriptというよりcssの気もしますが。
IE6で確認してます。

<body bgcolor="#999999">
<div id="test_area"></div>

このようにある場合、初期表示では行が表示されないのですが、
Javascriptで何か入れて、クリアしても一行分表示されてしまいます。

Javascriptで入れた時もずれないで欲しいのですが、何か良い方法はないでしょうか？
ちなみに初期化はscriptでこのようにしてます(dojo.byIdですが、getElementbyIdと同じ)。

よろしくお願いします。
dojo.byId("test_area").innerHTML = "";

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： _pipi_
回答日時：2008/10/07 14:54

<html>

<body bgcolor="#999999">
a
<div id="test_area">hh</div>
b<br>
<input type="button" value="Delete 'b'" onClick="delNode('test_area')">
<input type="button" value="plus 'abc'" onClick="document.getElementById('test_area').innerHTML='abc'">

<script>
function delNode(s){ ob=document.getElementById(s); while( ob.hasChildNodes() ) ob.removeChild( ob.firstChild ); }
</script>
ということで削除してから、同じところに'abc'を追加します

この回答への補足

pipiさん、ありがとうございます。

申し訳ありません、質問の意図が伝わっておりませんでした。
ご教授いただきましたソースと私のソースはほぼ同等で以降の動作も同じでした。

<div id="test_area">hh</div>のようにデフォルトで値をセットすることで、必ず一行分表示されたレイアウトになると思います。hhを取り除くと全く何もセットされず、

a
b

と表示されると思います。この状態に常にしたかったのですが、ご教授いただいたscriptの方もクリアしても

a

b

と表示されると思います。

そこで自己解決しましたが、<div id="tet_area" style="visibility:hidden"></div>とする事で解決しました。・・申し訳ありません。(この領域はDialogで出力する為使いまわされます。DojoのDialogでshowをしている為、表示等も問題なく動きましたが、他の用途ではこれが解決策とはいえないかもしれません。)

解説いただいた、div領域のテキストノードにnullが残ってしまう為、改行表示される事で理解できました。

お騒がせしました、ありがとうございます。

補足日時：2008/10/07 15:41

通報する

- 0
- 件

通報する

No.4

回答者： _pipi_
回答日時：2008/10/07 14:42

>domNodeも消さないといけないでしょうか？この領域には色々使いまわされるので、要素自体はクリアしたくないのですが・・。

だめでしょうか？
意味がわかりません！
dojo.byId("test_area").innerHTML = "";
にした時点で要素自体なくなっているでしょ！？
提示した
function delNode(s){ ob=document.getElementById(s); while( ob.hasChildNodes ) ob.removeChild( ob.firstChild ); }
は、div要素の子をすべて消すことであって,
親のdivは消していない。
innerHTMLを使い""で何も無いようにしているかもしれないが
実際には、divの中にテキストノードがnullの状態で残っています
これが空白行のそもそもの原因です
それを「要素自体はクリアしたくない」と表現するのであれば
いったい何を残しているの？

- 0
- 件

通報する

No.3

回答者： Logue256
回答日時：2008/10/06 22:18

TabContainerのサイズは指定してありますか？

おそらく、ページの真ん中にtabContainerをおいたところ、中身がページが横スクロールするくらい伸びてしまうという現象じゃないですか？

その場合、style="width:80%"のように指定してみてください。
また、高さを指定していないと正常にタブ内の内容が表示されない場合があります。理想的なのはheight:120pxのような絶対指定ですが、doLayout="false"を使うことにより、タブの高さがタブの内容に応じて変化するようにできます。

ただし、自分の確認した環境ではIEでの動作が少々怪しいところがあります。

絶対指定しない場合：
<div dojoType="dijit.layout.TabContainer" doLayout="false" id="tab_area">

サイズ指定する場合：
<div dojoType="dijit.layout.TabContainer" style="width:120px;height:400px;" id="tab_area">

Dijitは、dojoTypeなどの独自要素を追加しなければならない代わりに、jqueryやscriptaclousのように、スクリプトのみで使うためのHTML要素を追加しないですむのが最大の特徴ですね。

この回答への補足

ありがとうございます。

dojoを利用している方が少ない為、div領域のクリアだけにスポットを当て質問してましたが、dojoを使われてるようでご助言頂ければ幸いです。

実はdojoTypeは、TabContainerでは無く、モーダルのDialog(HTML書式)をinnerHTMLでセットしています。大まかなながれですが、画面上にいくつかのボタンがあり、それをクリックする事でこのDiv領域にモーダルの送信フォームをセット・表示しています。

このdiv領域のクリアタイミングは、データをsubmitした時、DiaLogをキャンセルした時です。

既に書きましたが、親画面でこの領域を既に記述しており、初期表示状態(Ｆ５で更新をかけても)でも既に存在しているのですが、その時は画面上では改行はされません。一度でもこのDiaLogを開くと一段ずれてしまいます。

また、できれば他言語で言えば、この領域がnullの状態(現在の初期表示状態)であってほしいのですが・・。

本当にありがとうございます。

補足日時：2008/10/06 22:35

通報する

- 0
- 件

通報する

No.2

回答者： Logue256
回答日時：2008/10/05 23:30

dojoの問題ではないと思います。

もしかして、TabContainerなどのタブの中身をinnerHTMLで内容を書き換えるみたいな処理をしていませんか？

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。innerHTMLで内容を書き換えています、ＨＴＭＬ形式の入力Formを入れております。

ちなみにクリアする時はこのようにしております。
dijit.byId("test_area").destroy();
dojo.byId("test_area").innerHTML = "";

一行目はdiv要素をクリアする為に書いているのですが、
実際元親ファイルに書かれている<div id="test_area"></div>に空文字をセットしたら、きれいになると思ったのですが・・。

通報する

お礼日時：2008/10/06 10:44

No.1

回答者： _pipi_
回答日時：2008/10/02 22:39

<html>

<body bgcolor="#999999">
<p>a</p>
<div id="test_area">b</div>
<p>c</p>
<input type="button" value="Delete 'b'" onClick="delNode('test_area')">
<script>

function delNode(s){ ob=document.getElementById(s); while( ob.hasChildNodes ) ob.removeChild( ob.firstChild ); }
</script>