Jquery «текст» не работает

Question

var $insertSuccessMessage = $('#insertSuccessMessage'); 
var $successPopup = $('#successPopup'); 
var $successSpan = $('#successSpan'); 

У меня есть DIV тег:

<div id="insertSuccessMessage"></div> 

Когда пользователь успешно вводит значение в поле ввода, я пытаюсь получить «успех» всплывающее окно появится под этот тег div так:

$insertSuccessMessage.append('<div class="alert alert-success alert-dismissible" id='successPopup' role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><span id="successSpan"></span></div>'); 
$successSpan.text("Successfully inserted value!"); 

Сторона: Я использую Bootstrap.

Так появится successPopup, но текст не будет; текст не вставлен между тегами span.

Answer 1

Вы не определяете $successSpan. Вы должны использовать $('#successSpan') для доступа к элементу с ID

Update после редактирования:

Вы определяете $successSpan слишком рано. Когда вы его определяете, элемент #successSpan еще не существует.

Answer 2

$insertSuccessMessage.append(' 
<div class="alert alert-success alert-dismissible" id='successPopup' role="alert"> 
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
<span aria-hidden="true">&times;</span></button><span id="successSpan"> 
</span></div>'); 
$successSpan.text("Successfully inserted value!"); 

вы нарушаете строку, используя неэкранированный апостроф при определении идентификатор атрибута на successPopup.

<div class="alert alert-success alert-dismissible" id='successPopup' role="alert"> 

должен быть

<div class="alert alert-success alert-dismissible" id="successPopup" role="alert"> 

или альтернативно

<div class="alert alert-success alert-dismissible" id=\'successPopup\' role="alert"> 

Answer 3

Попробуйте эту модификацию

$insertSuccessMessage.append('<div class="alert alert-success alert-dismissible" id="successPopup" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><span id="successSpan"></span></div>'); 
$('#successSpan').text("Successfully inserted value!"); 

Answer 4

переключатель Использовать строку.

Попробуйте это:

$('#insertSuccessMessage').append('<div class="alert alert-success alert-dismissible" id="successPopup" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><span id="successSpan"></span></div>'); 
$('#successSpan').html("Successfully inserted value!"); 

Здесь работают отлично!

Answer 5

Есть #successSpan элемент существует в DOM прежде чем вы попытаетесь сослаться на него? После добавления #successSpan к #insertSuccessMessage, вы должны быть в состоянии обратиться к #successSpan так:

$('#successSpan').text("Successfully inserted value!");