473,549 Members | 2,651 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Dynamically changing HTML within a DIV?

I am going nuts trying to find a paragraph in a book that described how to
change the text content (HTML) in a DIV.

Actually I have an array of HTML strings that I want to drop into the DIV,
depending on button clicks, etc.

Putting this stuff into TEXTAREA and TEXT is simple, but I want to be able
to mix font families, weights, sizes, and stuff like that.

Thanks for your help.

DaveH
Jul 20 '05 #1
10 63574
Free-Ed, Ltd. wrote on 28 aug 2003 in comp.lang.javas cript:
I am going nuts trying to find a paragraph in a book that described
how to change the text content (HTML) in a DIV.

Actually I have an array of HTML strings that I want to drop into the
DIV, depending on button clicks, etc.

Putting this stuff into TEXTAREA and TEXT is simple, but I want to be
able to mix font families, weights, sizes, and stuff like that.


<script type="text/javascript">
t1="<p style='color:re d;'>hi<\/p>"
t2="<p style='color:gr een;'>there<\/p>"
</script>

<button onclick=div1.in nerHTML=t1>t1</button>
<button onclick=div1.in nerHTML=t2>t2</button>

<div id="div1"></div>

IE6 tested

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 20 '05 #2
Free-Ed, Ltd. wrote:
I am going nuts trying to find a paragraph in a book that described how to
change the text content (HTML) in a DIV.


http://www.oreillynet.com/pub/a/java.../17/DOM-2.html
http://www.oreillynet.com/pub/a/java.../07/DOM-2.html

--
David Dorward http://dorward.me.uk/
Jul 20 '05 #3
Evertjan. wrote:
<button onclick=div1.in nerHTML=t1>t1</button>
<button onclick=div1.in nerHTML=t2>t2</button>

<div id="div1"></div>

IE6 tested


Mozilla 1.4 (i.e. Netscape 7.1) - failed
Opera 7.11 - failed
--
David Dorward http://dorward.me.uk/
Jul 20 '05 #4
David Dorward wrote on 28 aug 2003 in comp.lang.javas cript:
Evertjan. wrote:
<button onclick=div1.in nerHTML=t1>t1</button>
<button onclick=div1.in nerHTML=t2>t2</button>

<div id="div1"></div>

IE6 tested


Mozilla 1.4 (i.e. Netscape 7.1) - failed
Opera 7.11 - failed


So only 98% of the worlds users can use it yet.

What do you want ? A push in the right direction or a ready made answer.

I did not test for those minority browsers.

perhaps:

<button
onclick=documen t.getElementByI d("div1").inner HTML=t1>
t1</button>

will do the trick.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 20 '05 #5
"Free-Ed, Ltd." <da***@free-ed.net> writes:
I am going nuts trying to find a paragraph in a book that described how to
change the text content (HTML) in a DIV.
There are several ways.
Actually I have an array of HTML strings that I want to drop into the DIV,
depending on button clicks, etc. Putting this stuff into TEXTAREA and TEXT is simple, but I want to be able
to mix font families, weights, sizes, and stuff like that.


You want to change the document structure dynamically.
This already rules out Netscape 4, Opera 6, and other older browsers,
where you cannot change the document structure.

There are several ways to do what you want. Here are three, with each
their problems and limitiations, including browser support.

innerHTML
---------
One solution, widely used, is the non-standard "innerHTML" property.
It was introduced by Microsoft, but is available in both Mozilla and
Opera 7 (probably because it was in widespread use before a DOM changes
were standardized).

To use innerHTML, you can simply write:

document.getEle mentById('divId ').innerHTML =
"<div id='foo'>new <em>content</em>, yey!</div>";

The HTML is parsed an added as new child nodes of the div node. There
are some places where innerHTML is not so good, typically where the
contents are not HTML. In IE, e.g., the structure of a table is
read-only using innerHTML. That is, for these elements, innerHTML is a
read-only property:
COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD,
TITLE, TR
<URL:http://msdn.microsoft. com/library/default.asp?url =/workshop/author/dhtml/dhtml_node_entr y.asp>

In Mozilla, using innerHTML on a textarea has the sideeffect of adding
child nodes to it, which is possibly a bug (but since there is no
formal definition of innerHTML, it is hard to say).

The biggest problem with innerHTML is that there is no standard
governing it, so new browsers may chose not to support it. It is
unlikely, as the world looks today, but who know when that might
change.

DOM node creation
-----------------
Instead of having your Javascript create a string and then parse
it to DOM nodes, you can use standard DOM function to create the
structure directly.

Example:

var div = document.getEle mentById("divId ");
// clear previous content:
while (div.hasChildNo des()) {
div.removeChild (div.lastChild) ;
}
// create and add new content:
var foo = document.create Element("div");
foo.id = "foo";
foo.appendChild (document.creat eTextNode("new "));
var em = document.create Element("em");
em.appendChild( document.create TextNode("conte nt"));
foo.appendChild (em);
foo.appendChild (document.creat eTextNode(", yey!"));
div.appendChild (foo);

DOM node creation is standardized, so there is reason to believe
that new browsers will support it.

It also requires large amounts of code, and is therefore more
errorprone (more code = more bugs), and it is hard to see what
is really happening.

I usually have some simpler functions as interface, so the above would
become

var div = document.getEle mentById("divId ");
clearContent(di v);
var foo =
create("div",["id","foo"], text("new "),
create("em",tex t("content)") ,
text(", yey!"));
div.appendChild (foo);

but it is still a hassle compared to just writing HTML.
Moving DOM nodes
----------------

The third possibility combines the advantages of both of the previous
ones, but restricts you to a fixed, predefined set of contents.

You create the HTML directly in your HTML file, and then use DOM
methods to move them around.

E.g., HTML:
<div id="hiddenWrapp er" style="display: none">
<div id="foo">new <em>content</em>, yey!</div>
</div>
and code:
var div = document.getEle mentById("divId ");
var wrapper = document.getEle mentById("hidde nWrapper");
// store content of div
while (div.hasChildNo des()) {
wrapper.appendC hild(div.lastCh ild);
}
// insert new content
div.appendChild (document.getEl ementById("foo" ));

As I said above, this requires you to have created all the possible
values you want to insert in advance. If you can do that, it works fine.
Otherwise, you will have to use one of the other methods, where you
can create new DOM trees truely dynamically.
Good luck
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #6
"Evertjan." <ex************ **@interxnl.net > writes:
So only 98% of the worlds users can use it yet.
While statistics disagree on how many people use each browser, I have
not seen one that claimed 98% IE browsers recently.
What do you want ? A push in the right direction or a ready made answer.
I don't care, as long the reader knows which it is. I take it, it was
meant as a push.
I did not test for those minority browsers.
No need to test each time. That method of coding is well known not to
work in anything but IE, and is considered bad conding practice by
many of the readers of this group, for that exact reason.
<button
onclick=documen t.getElementByI d("div1").inner HTML=t1>
t1</button>

will do the trick.


Yes. It is still illegal HTML since the value isn't quoted.
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #7
Lasse Reichstein Nielsen wrote on 28 aug 2003 in comp.lang.javas cript:
<button
onclick=documen t.getElementByI d("div1").inner HTML=t1>
t1</button>

will do the trick.


Yes. It is still illegal HTML since the value isn't quoted.


my mistake, sorry:

<button
onclick="docume nt.getElementBy Id('div1').inne rHTML=t1">
t1</button>

So what is the scope of the <button> button ?
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 20 '05 #8
"Evertjan." <ex************ **@interxnl.net > writes:
<button
onclick="docume nt.getElementBy Id('div1').inne rHTML=t1">
t1</button>

So what is the scope of the <button> button ?


I am not sure what you mean by the scope of the button.

The variables that are available to the event handler (as if wrapped
in a "with" construct) are (if I remember correctly):
the global variables (properties of the global object)
the properties of the document object
the properties of the form elemen, if the button is inside a form
the properties of the button element itself.

And for the record, I would add "type='butt on'" to the button tag.
The default type is "submit".
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #9
Lasse Reichstein Nielsen wrote on 28 aug 2003 in comp.lang.javas cript:
So what is the scope of the <button> button ?


I am not sure what you mean by the scope of the button.


Sorry, I ment scope in the sense of
"which browsers do [not] support <button>..</button>" ?

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
1977
by: Billy | last post by:
Hello, I'm having a problem dynamically changing the color of a table background. I'm not sure exactly how to word this, but I'll give an example. I have a function called greentored(propname) i want to be able to change the following to a different color: document.all.propname.style.visibility
5
11028
by: Rick Spiewak | last post by:
I need to generate a "buy" button as part of an ASP.NET page - this consists of a small HTML form with hidden fields, conforming to the requirements of a merchant credit card processor. PayPal is similar. I'm succeeding in doing this by using Writer.Write to emit my HTML, at least as far as getting it to work. However, depending on where...
1
1682
by: Jeff H. | last post by:
I created a survey page with dynamically added html controls, as below. However, now that I have the page, is there a way to reference the fields to get the data out? while (drResultList.Read()) { ... // Survey question text System.Web.UI.HtmlControls.HtmlGenericControl hQuestion = new
1
3402
by: Marcus | last post by:
I have a problem maybe one of you could help me with. I've created a data entry screen with lots of dynamically-created client-side controls. I create HTML texboxes client-side by assigning a value to the td.innerHTML property. The UI is done, and I now want to post back the user's changes and update my business object in .NET. But when I...
2
1568
by: gralexp | last post by:
Hi Guys. I have a problem, and for some reason I have not been able to find an answer on the net. In a nutshell, I have some codes on my page, which I want to change to an appropriate string (from a hashtable). Since I do not want to pass this hashtable to a function all the time I encounter it on the page, I want to do it once, in one...
1
1832
by: Jeremy | last post by:
Hi, I am attempting to load an ad Banner to coincide with a piece of video pre-roll. The following function is called which is supposed to create an empty IFRAME. Once this IFRAME object is created javaScript should then be able to open and write to the IFRAME. The following code seems to work perfectly in I.E. however in Firefox doesn't...
2
6958
by: John | last post by:
Hi Everyone, I have a question about dynamically changing the length of a varchar(n) field, in case the value I'm trying to insert is too big and will give a "truncated" error, but before the error is given! i.e. Is there some kind of a way to "test" the length of the field while Inserting the value into it, and to have it automatically...
1
2259
by: johnjsforum | last post by:
Buddies, I have a web page to create HTML buttons dynamically as in the “formDivColorPicker” function //////////////////////////////////////////////////////////////////////////////////// version 1 : using global variables ////////////////////////////////////////////////////////////////// var _textField, _divColorPicker; // global vars...
3
2322
by: senthilkumarb | last post by:
Dynamically changing browser settings Browser have various settings like - cookies, cache, etc... How to check a browser whether cookies is Enabled OR Disabled in the client machine using JavaScript Note:- please don't tell -- Tools--> Internet option-->etc...
0
7532
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
1
7492
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7823
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
1
5381
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5101
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3510
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3491
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1957
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1069
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.