- ベストアンサー
createElementによる空要素の生成について
こんにちは。 createElementで出来る要素の生成についての質問です。 createElementでbrやimgなどの空要素を生成したいのですが、できあがったもののソースを見ると、「<br>」や「<img>」など終了タグがついていないものが生成されてしまいました（Firefoxの「選択した部分のソースを表示」で確認）。 XHTML文書としてページ作成しているので、どうにも具合悪いです。 終了タグのついた空要素の生成方法など、対処法があれば教えていただけないでしょうか。
- mihosaku3
- お礼率45% (16/35)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
Firefoxの「選択した部分のソースを表示」では、 静的に書かれた空要素であっても後ろの「/」が表示されなかったりします。 Firebug(※)のHTML表示を行うと、動的に追加されたimgには「/」が付いています。 あまり気にしなくてもいいのでは？ ※ http://addons.mozilla.org/ja/firefox/addon/1843
関連するQ&A
- XHTML1.0で空要素タグの「/」は省略可能か
XHTML 1.0で、エンコードがUTF-8であるなど一定の条件を満たせばXML宣言の省略は可能と聞きましたが、 空要素タグの「/」についてはどうでしょうか。 あるサイトで、XHTML 1.0で書かれているはずのページで、空要素タグに「/」が入っていないので （つまり、<br>とか<img src="...">のようになっている） ちょっと気になりました。 ブラウザーでは一応ちゃんと表示されてはいるようですが。
- ベストアンサー
- HTML
- 空要素タグは/>で閉じてはいけないのですか？
空要素タグは/>で閉じてはいけないのですか？ <img src="URL" alt"説明" />をAnother HTML-lintでチェックをしてみたのですけど、 「XHTML以外では、空要素タグを /> で閉じることはできません。」と出てきました。 FC2ブログを使ってるんですけど、テンプレートのメタタグとかには全て/>が入っていました。 空要素の/>はやめた方がいいのでしょうか。
- ベストアンサー
- HTML
- XXXXXX では空要素タグを `<TAG />`
ソース内でonclick 属性を使っているので http://www2010.chin3.net/tech/html/009.html を参考に、 <meta http-equiv="content-script-type" content="text/javascript" /> を入れたのですが、 Another HTML Lintでソースをチェックしたときに 75. XXXXXX では空要素タグを `<TAG />` と書くことはできません。 *5* XHTML以外では、空要素タグを /> で閉じることはできません。 というエラー内容になりました。 <meta http-equiv="content-script-type" content="text/javascript" /> の何がダメなのでしょうか？ そもそも「XXXXXX では」の「XXXXXX」の意味が不明だし、 「空要素タグ」とは、何を指してるのでしょうか？
- ベストアンサー
- HTML
- html文書の空要素に終了タグを入れるとどうなるの？
html文書の空要素に終了タグを入れると表示など影響しますか？ 恐らく推奨はされないと思うのですが、表示に影響があるのかなど知りたいです。
- 締切済み
- ホームページ作成ソフト
- javascriptで要素の構造を生成
昨日質問したプログラムの続きなんですが、 実はクリックした画像を大きくしたくてその方法を考えています function getElements ( obj ) { //イメージタグここから var src = obj.getAttribute('src'); var element = document.createElement('img'); element.src = src; //div生成 var box = document.createElement('div'); box.style.position = 'fixed'; box.class = 'photobig'; box.style.top = '50%'; box.style.left = '50%'; box.style.width = '900px'; box.style.height = '600px'; box.style.background = '#000000'; box.style.opacity = '0.7'; box.style.marginTop = '-300px'; box.style.marginLeft = '-450px'; box.innerHTML = element;//←ここが問題 var objBody = document.getElementsByTagName("body").item(0); objBody.appendChild(box); // body要素にdivエレメントを追加 // var objPhotobox = document.getElementsByClassName("photobig").item(0); // objPhotobox.appendChild(element); } javascriptでdivを生成し、その中にimgタグで画像を入れようとしています appendChildで生成した後で、innerHTMLにimgタグの情報を入れようとしています innerHTMLに変数をいれてもタグとして生成されないのが分かったところで、 divにクラス名を付けてそのクラスにappendChildしてみたんですが、これもダメでした どうすればよいのか見当つかず困っています 生成した後のものを扱うのが難しそうなので一度にすべて生成するようにするのかなと思いつつやり方がわかりません よろしくお願いします
- ベストアンサー
- JavaScript
- XHTML1.1で空要素タグを書くと、W3CのValidatorでエラ
XHTML1.1で空要素タグを書くと、W3CのValidatorでエラーが出てしまいます。 下記のXHTMLをW3CのValidatorでチェックをすると、body内の<br />の箇所でエラー出てしまいます。 =========================================================== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title></title> </head> <body> <br /> </body> </html> =========================================================== エラーの内容は下記の通りです。 document type does not allow element "br" here; missing one of "ins", "del", "h1", "h2", "h3", "h4", "h5", "h6", "p", "div", "pre", "address", "fieldset" start-tag <br /> The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>"). =========================================================== <img>などの<br />以外の空要素タグを入れても同様のエラーが出ます。 ただし、<div><br /></div>とするとエラーが出ません。 XHTML1.1の仕様では、空要素タグはブロック要素タグなどで囲わないといけないのでしょうか？ もしくは、記述になにか間違いがあるのでしょうか？ ご教示をお願いいたします。
- ベストアンサー
- HTML
- Another HTML-lint gatewayでHTML文書の文法
Another HTML-lint gatewayでHTML文書の文法をチェックしましたが、次の項目の修正方法がわかりません。 HTMLヴァージョンは「XHTML1.0 Transitional」（DreamweaverCS5） (1)空要素タグ <img> は <img /> として閉じなければなりません <p> <img src="image/otaxoutline.JPG" width="480" height="360" alt="ｏｘｏｘ"></p> (2)空要素タグ <img> の要素には空白さえも含めることはできません p class="menu-left"><a href="http://twitter.com/xxxx"><img src="image/otaxtwitter.jpg" width="85" height="45" alt="ｏｘｏｘ"> </a></p> (3)空要素タグ <br> の要素には空白さえも含めることはできません (4)空要素タグ <br> は <br /> として閉じなければなりません by <a href="http://www.automatic-link.net/" target="_blank">ｏｘｏｘ</a><br> (5)空要素タグ <hr> の要素には空白さえも含めることはできません (6)空要素タグ <hr> は <hr /> として閉じなければなりません <p class="center"> <a href="http://www.otax81.com/FormMail/contact/FormMail.html"><img src="image/otaxtoiawaefooter.jpg" width="435" height="171" alt="footer問合せ"></a></p> <hr> ＜参考＞ http://openlab.ring.gr.jp/k16/htmllint/htmllint.html http://otax81.com/
- ベストアンサー
- ホームページ作成ソフト
- 新しく開いたウィンドウへの要素の挿入方法
javaScriptのwindow.openを使ってウィンドウを開き そのウィンドウにhtmlタグを挿入するプログラムを作りたいのですが うまくいきません。 例えば以下のような場合だと id="parent"を持つ親タグの子要素として、appendChildメソッドを使用しimgタグを挿入出来ます var img = document.createElement("img"); var parent = document.getElementById("parent"); parent.appendChild(img); しかしwindow.openで開いたウィンドウは親となるタグがありません。 まっさらなウィンドウに要素を挿入するにはどうすればいいんでしょうか？ なかなかうまくいかず困っております。ぜひお詳しい方ご回答お願いします。
- ベストアンサー
- JavaScript
- 空要素タグ？？
ブログのSEO対策の為に以下のページに自分のページURLを入れ タグが上手く書けているかをチェックしました http://openlab.ring.gr.jp/k16/htmllint/htmllinte.html すると、その中の回答に 空要素タグ の要素には空白さえも含めることはできません。 という問題点を指摘されました これの意味は XMLの Content of Elements(J)では、空要素タグは、<tag></tag> のように開始タグと終了タグをくっつけて書かなければならないとされてます。つまり、空白も含めることはできません。 という事です そして対象となる部分は以下のタグのどこかにあるようなのですが まったく検討がつきません どこがエラーの対象なのでしょうか？ ちなみにブログはMTですのでカスタマイズは問題ありません よろしくお願いします <h2 class="archive-header"><$MTBlogName encode_html="1"$>項目一覧</h2> <div class="entry" id="entry-999"> <MTCategories> <h3 class="entry-header"><a href="<$MTCategoryArchiveLink$>"> <$MTCategoryLabel cutfirstchar="4"$></a></h3> <$MTCategoryDescription$> <div class="entry-content"> <div class="entry-body"> <MTEntries lastn="999"> <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a> | </MTEntries> </div> <p class="entry-footer"></p> </div> </MTCategories> </div> <p><br /></p> <div class="gotop"><a href="#TOP">このページのトップへ↑</a></div> </div> </div>
- ベストアンサー
- その他（プログラミング・開発）
- XHTMLとHTMLの違いについて
XHTMLのHTMLの違いについて教えてください。 勉強するものの、これといった違いが判らずにこまってます。 （今のところ、HTMLとは記述方式が違うんだよ～とか、XMLの宣言が必要なんだよ～、ということはわかったのですが） （参考したＵＲＬ） http://www.atmarkit.co.jp/fxml/askxmlexpert/022xhtml/22xhtml.html HTMLとXHTMLの違いとして以下の点が挙げられていることがわかりました。 ----------------------------------------------------------------- １．文書は整形式でなければならない ２．要素名及び属性名は小文字でなければならない ３．非空要素には終了タグが必要である ４．属性値は常に引用符で括られなければならない ５．属性の省略化はしてはならない ６．meta、hr、br、img などは、空要素として書く ７．属性値内での改行を含む複数の空白は１つと見なす ８．スクリプトおよびスタイル要素の定義が異なる ９．要素の入れ子などSGMLの排除機能を再現できない １０．‘id’および‘name’属性をもつ要素は、‘id’属性を使用する ----------------------------------------------------------------- とあるのですが、違う部分っていうのは「こういった定義部分だけ」であって、動作として大きな違い「ここが違うんだ」といった部分はないのでしょうか？ 「書式が厳密になっています。」言葉から、XHTMLは「HTMLをより厳密に書くもの」ということなのでしょうか？ また、１０番目の、 「‘id’および‘name’属性をもつ要素は、‘id’属性を使用する 」について、イメージできなかったのですが、一体何のことを言っているのでしょうか？ 例えば、JavaScriptを使用して、要素を操作する場合は、 getElementById("ID名")にて、操作を行うべきである、と言っているのでしょうか？
- ベストアンサー
- HTML
お礼
回答ありがとうございます。 >静的に書かれた空要素であっても後ろの「/」が表示されなかったりします。 ホントですね・・・ちょっとびっくりです。 特に問題ないようなので気にしない事にします。 ありがとうございました。