Add a span in a span with JQuery

Question

I'm trying to put a <span> in an other <span> in the title of JQuery's modal but it doesn't work.

Here's my HTML code :

<div class="ui-dialog-titlebar...">
  <span class="ui-dialog-title">Info title</span>
  ...
</div>
<div id="1">

And I want to put a <span class="glyphicon glyphicon-info-sign"></span> inside the ui-dialog-title <span> .

I tried to do it like this :

$(".ui-dialog-title").prepend('<span class="glyphicon glyphicon-info-sign"></span>');

And it works !

<div class="ui-dialog-titlebar...">
  <span class="ui-dialog-title">
    <span class="glyphicon glyphicon-info-sign"></span>Info title
  </span>
  ...
</div>
<div id="1">

But , I will have multiple <span> with the class ui-dialog-title in my document and I want to access this <span> using the id of the next <div> .

I tried this :

$("#"+myId).prev("div").first("span").prepend('<span class="glyphicon glyphicon-info-sign"></span>');

But the glyphicon <span> was placed BEFORE ui-dialog-title <span> :

<div class="ui-dialog-titlebar...">
  <span class="glyphicon glyphicon-info-sign"></span>
  <span class="ui-dialog-title">Info title</span>
  ...
</div>
<div id="1">

I don't understand why it is placed here because with the other method, it works.

I hope you will understand my problem and thank you for your help !

Answer 1

You can do:

$("#"+myId).prev("div").find(".ui-dialog-title").prepend('<span class="glyphicon glyphicon-info-sign"></span>');

Working example

Structure:

<div class="ui-dialog-titlebar">
  <span class="ui-dialog-title"><span class="glyphicon glyphicon-info-sign"></span>Info title</span>

</div>