スパンはスタイル情報と.html（）更新を無視します

Question

このフォームで私はユーザメッセージ<span>を持っています。これは、HTMLとCSSスタイルシートで与えられたスタイル情報を無視します。また、.html（）を使用して更新すると、新しいテキストは表示されません。

$('#matting').append('<div id="register_user_box" class="inline_form" style="position: absolute; top: 20px; right: 10px; <br/><span id="user_msg" style="width: 90%; height: 15px; color: red; font-family: Arial; font-size: 11px;">Info msg</span><br/><form id="register_user_id" name="register_user_form"> <button id="cancel" onclick="cancel_register(); return false;" style="width: 63px; float: right; margin-right:8px;">Cancel</button> <button id="register" onclick="register_user(); return false;" style="width: 63px; float: right;">Save</button> </form></div>'); 

user_msgのスタイルで指定された情報は無視されます。 $('#user_msg').html(message);でテキストを更新すると、これも無視されます。これを説明できるものは何ですか？

Answer 1

HTML構文エラー - あなたはそれの内側にあなたの<div>やスタイル属性を閉じませんでした：

$('#matting').append('<div id="register_user_box" class="inline_form"'+ 
    ' style="position: absolute; top: 20px; right: 10px; ' + // missing ">! 
    '<br/><span id="user_msg" style="width: 90%; height: 15px;'+ 
    'color: red; font-family: Arial; font-size: 11px;">Info msg</span> '+ 
    '<br/><form id="register_user_id" name="register_user_form">'+ 
    '<button id="cancel" onclick="cancel_register(); return false;"'+ 
    ' style="width: 63px; float: right; margin-right:8px;">Cancel</button>'+ 
    ' <button id="register" onclick="register_user(); return false;"'+ 
    'style="width: 63px; float: right;">Save</button> </form></div>'); 

も<span>年代にはインライン要素（scrappedcola's answerを参照）していることに注意してください。

Answer 2

<span>はインライン要素です。それを高さと幅を与えるにはdisplay:inline-block;テキストメッセージを追加するには$('#user_msg').text(message);