Question about html span tag used with innerHTML tag.

[George2]

Hi, everyone!

Here are some codes discussing html span tag used
with innerHTML tag. Who can show me the function
of the piece of codes here?


Codes:
--------
<img id='obj1' style='cursor:hand' src='1.gif'>
<img id='obj1' style='cursor:hand' src='11.gif'>
<a class = item href = "test1.jsp"> abc </a></br>
<span id = 'span1'></span>
<img id='obj2' style='cursor:hand' src='2.gif'>
<img id='obj2' style='cursor:hand' src='22.gif'>
<a class = item href = "test2.jsp"> cba </a></br>
<span id = 'span2'></span>
--------

In some other places,

Codes
--------
span2.innerHTML='<div align=left>Uploading...</div><br>'
--------


Who can explain the meaning and function of the two pieces
of codes here? (I think it is used to insert html scripts between
<span id = 'span2'> and </span>, but I am not sure.)


Thanks in advance,
George

[antares686]

You are somewhat correct.

Here is the definition.

Sets or retrieves the HTML between the start and end tags of the object.

So in you case you are saying set the html between the begin and end tags of object whose id is span2.

This doesn't just insert html though. It replaces any html between those markers.

So if you have

<span id = 'span2'>
<img id='obj2' style='cursor:hand' src='2.gif'>
<img id='obj2' style='cursor:hand' src='22.gif'>
<a class = item href = "test2.jsp"> cba </a></br>
<span>


and run

span2.innerHTML='<div align=left>Uploading...</div><br>'

then the effective output would be as though you wrote

<span id = 'span2'>
<div align=left>Uploading...</div><br>
<span>

instead of the previous.

So say you didn't want that you occurr then you need to use instead insertAdjacentHTML.

From MSDN Library

Inserts the given HTML text into the element at the location.

Syntax

object.insertAdjacentHTML(sWhere, sText)
Parameters

sWhere Required. String that specifies where to insert the HTML text, using one of the following values: beforeBegin Inserts sText immediately before the object.
afterBegin Inserts sText after the start of the object but before all other content in the object.
beforeEnd Inserts sText immediately before the end of the object but after all other content in the object.
afterEnd Inserts sText immediately after the end of the object.

sText Required. String that specifies the HTML text to insert. The string can be a combination of text and HTML tags. This must be well-formed, valid HTML or this method will fail.

But since you are not needing to worry about HTML being replaced in your case then innerHTML is perfect as it means less code size.

[George2]

Thanks, antares686 buddie!

I have rated your reply!

George

Originally posted by antares686
You are somewhat correct.

Here is the definition.



So in you case you are saying set the html between the begin and end tags of object whose id is span2.

This doesn't just insert html though. It replaces any html between those markers.

So if you have

<span id = 'span2'>
<img id='obj2' style='cursor:hand' src='2.gif'>
<img id='obj2' style='cursor:hand' src='22.gif'>
<a class = item href = "test2.jsp"> cba </a></br>
<span>


and run

span2.innerHTML='<div align=left>Uploading...</div><br>'

then the effective output would be as though you wrote

<span id = 'span2'>
<div align=left>Uploading...</div><br>
<span>

instead of the previous.

So say you didn't want that you occurr then you need to use instead insertAdjacentHTML.




But since you are not needing to worry about HTML being replaced in your case then innerHTML is perfect as it means less code size.