0

I am customising a chat based web interface. I have very limited control over the markup being used.

Basically, I want to add new element <span class="icon" /> to each chat message.

<div id="chatLog">
<span class="msg agent">
  <strong>Agent Name</strong>
  Hi, how are you today? How can I help?
</span>
<span class="msg customer">
  <strong>Customer Name</strong>
  I'm fine thanks, please can you tell me more about the products you sell?
</span>
</div>

The jquery I would like to use is something like this:

<script>
  jquery('.msg').append('<span class="icon" />');
</script>

So I have

<div id="chatLog">
<span class="msg agent">
  <strong>Agent Name</strong>
  Hi, how are you today? How can I help?
  <span class="icon" />
</span>
<span class="msg customer">
  <strong>Customer Name</strong>
  I'm fine thanks, please can you tell me more about the products you sell?
  <span class="icon" />
</span>
<div id="chatLog">

The markup will be continually changing as more and more messages are sent between the agent and the customer. How can I ensure all chat messages span.msg have this new element <span class="icon" /> appended?

<div id="chatLog">
<span class="msg agent"><strong>Agent Name</strong>Hi, how are you today? How can I help?</span>
<span class="msg customer"><strong>Customer Name</strong>I'm fine thanks, please can you tell me more about the products you sell?</span>
<span class="msg agent"><strong>Agent Name</strong>Yes certainly, any particular product?</span>
<span class="msg customer"><strong>Customer Name</strong>Product ISBN-123-456 please</span>
<div id="chatLog">
cyorkston
  • 225
  • 1
  • 10
  • How are the messages sent? – BNL Jun 19 '13 at 14:12
  • So where do you want that `

    ` to be, in the message? And, incidentally, a `p` should *not* be nested within a `span` (that's invalid HTML, I'm afraid).

     – David Thomas Jun 19 '13 at 14:12
  • Also `span` IDs have to be unique... – Balint Bako Jun 19 '13 at 14:28
  • Updated to well formed HTML – cyorkston Jun 19 '13 at 14:36
  • Without knowing what mechanism causes the updates to appear, I don't see how this question can be answered. – BNL Jun 19 '13 at 14:43
  • Sorry, my mistake for missing the key info; the DOM is updated by a 3rd party script. – cyorkston Jun 19 '13 at 15:03
  • 1
    Does said script provide any events or other mechanism for knowing when a new message appears? If not, see this question: http://stackoverflow.com/questions/2844565/is-there-a-jquery-dom-change-listener – BNL Jun 19 '13 at 15:08
  • Or http://stackoverflow.com/questions/7434685/event-when-element-added-to-page?lq=1 which simply suggests running a timer to check for new elements. The downside of which is that there will be a short window when the icon hasn't shown up yet. – BNL Jun 19 '13 at 15:10

0 Answers0