У меня есть фрагмент HTML, подобный этому:
<body>
<div id="main" class="popup">
<h1> Webpage chatter </h1>
<button id="signOut">Sign Out</button>
<div id="welcome-section">
<div id="invalid-error-msg" class="invalid-input-text">
</div>
</div>
...
И сценарий jquery, который изменяет элемент id = invalid-error-msg:
$("#invalid-error-msg").append("<p>Too short. Display name must be 6 or more characters.</p>");
jquery не находит идентификатор invalid-error-msg, но если я разверну этот div, как показано ниже, он найдет его и без проблем его модифицирует.
<body>
<!-- show a text box, a list of persons in chat, chat box, header title -->
<div id="main" class="popup">
<h1> Webpage chatter </h1>
<button id="signOut">Sign Out</button>
<div id="welcome-section">
</div>
<div id="invalid-error-msg" class="invalid-input-text">
</div>
Почему это происходит? Это нормальное поведение?