Appending arbitrary text [JavaScript]

Prev: validating a form, one required field , another field if searched on requires both fields
Next: validating a form, one required field 2

From: Andrew Poulos on 27 Jun 2010 23:23

I'm trying to generate a dynamic "text" box filled with a HTML fragment
that's been saved to a string. First I tried a quick and dirty way using
innerHTML with this:

var str = "Some text: " +
"Hooray" +
"<ul>" +
"<li>for you</li>" +
"<li>Blue</li>" +
"<li>Fred</li>" +
"</ul>";

var mytext = document.createElement("div");
var plabel = document.createElement("p");

plabel.innerHTML = str; // -------> IE errors

mytext.appendChild(plabel);
document.body.appendChild(mytext);

but IE complains with "Unknown runtime error" at the innerHTML.

What's a better way to do this given that "str" can contain arbitrary
text as HTML?

Andrew Poulos

From: Andrew Poulos on 27 Jun 2010 23:41

On 28/06/2010 1:23 PM, Andrew Poulos wrote:
> I'm trying to generate a dynamic "text" box filled with a HTML fragment
> that's been saved to a string. First I tried a quick and dirty way using
> innerHTML with this:
>
> var str = "Some text: " +
> "Hooray" +
> "<ul>" +
> "<li>for you</li>" +
> "<li>Blue</li>" +
> "<li>Fred</li>" +
> "</ul>";
>
> var mytext = document.createElement("div");
> var plabel = document.createElement("p");
>
> plabel.innerHTML = str; // -------> IE errors
>
> mytext.appendChild(plabel);
> document.body.appendChild(mytext);
>
> but IE complains with "Unknown runtime error" at the innerHTML.
>
> What's a better way to do this given that "str" can contain arbitrary
> text as HTML?

Ok, I found the error. I think IE doesn't want me putting a list inside
a P element. Funny that Firefox et al don't complain and display the tag
soup.

Andrew Poulos

From: Thomas 'PointedEars' Lahn on 28 Jun 2010 05:17

Andrew Poulos wrote:

> On 28/06/2010 1:23 PM, Andrew Poulos wrote:
>> var str = "Some text: " +
>> "Hooray" +
>> "<ul>" +
>> "<li>for you</li>" +
>> "<li>Blue</li>" +
>> "<li>Fred</li>" +
>> "</ul>";
>>
>> var mytext = document.createElement("div");
>> var plabel = document.createElement("p");
>>
>> plabel.innerHTML = str; // -------> IE errors
>>
>> mytext.appendChild(plabel);
>> document.body.appendChild(mytext);
>>
>> but IE complains with "Unknown runtime error" at the innerHTML.
>>
>> What's a better way to do this given that "str" can contain arbitrary
>> text as HTML?
>
> Ok, I found the error. I think IE doesn't want me putting a list inside
> a P element.

Or it complains because you have

a) tried to include an `span' element where it is not allowed
(outside of a block-level element)
b) not ended the `span' element in the `li' element.
c) not escaped the ETAGO delimiter.

> Funny that Firefox et al don't complain and display the tag
> soup.

You have been needlessly mixing the proprietary with the standards-compliant
approach, and using invalid markup, so don't be surprised of inconsistent
results.

PointedEars
--
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.
-- Richard Cornford, cljs, <cife6q$253$1$8300dec7(a)news.demon.co.uk> (2004)

From: Evertjan. on 28 Jun 2010 05:32

Andrew Poulos wrote on 28 jun 2010 in comp.lang.javascript:

> I'm trying to generate a dynamic "text" box filled with a HTML
> fragment that's been saved to a string. First I tried a quick and
> dirty way using innerHTML with this:
>
> var str = "Some text: " +
> "Hooray" +
> "<ul>" +
> "<li>for you</li>" +
> "<li>Blue</li>" +

error 1: missing !!!

error 2: red != Blue

> "<li>Fred</li>" +
> "</ul>";
>
> var mytext = document.createElement("div");

> var plabel = document.createElement("p");
>
> plabel.innerHTML = str; // -------> IE errors
>
> mytext.appendChild(plabel);
> document.body.appendChild(mytext);
>
> but IE complains with "Unknown runtime error" at the innerHTML.
>
> What's a better way to do this given that "str" can contain arbitrary
> text as HTML?

I think the IE error points to the first char of the block:

mytext.innerHTML = str;
mytext.appendChild(plabel);
document.body.appendChild(mytext);

when there is no body yet.

============ test.html ==================
<body>
<script type='text/javascript'>

var str = "Some text: " +
"Hooray" +
"<ul>" +
"<li>for you</li>" +
"<li>Red !</li>" +
"<li>Fred</li>" +
"</ul>";

var mytext = document.createElement("div");
var plabel = document.createElement("p");
mytext.innerHTML = str;
mytext.appendChild(plabel);
document.body.appendChild(mytext);

</script>
=========================================

This works fine here, in IE8 and Chrome

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

From: Thomas 'PointedEars' Lahn on 28 Jun 2010 06:48

Thomas 'PointedEars' Lahn wrote:

> Andrew Poulos wrote:
>> On 28/06/2010 1:23 PM, Andrew Poulos wrote:
>>> var str = "Some text: " +
>>> "Hooray" +
>>> "<ul>" +
>>> "<li>for you</li>" +
>>> "<li>Blue</li>" +
>>> "<li>Fred</li>" +
>>> "</ul>";
>>>
>>> var mytext = document.createElement("div");
>>> var plabel = document.createElement("p");
>>>
>>> plabel.innerHTML = str; // -------> IE errors
>>>
>>> mytext.appendChild(plabel);
>>> document.body.appendChild(mytext);
>>>
>>> but IE complains with "Unknown runtime error" at the innerHTML.
>>> [...]
>>
>> Ok, I found the error. I think IE doesn't want me putting a list inside
>> a P element.
>
> Or it complains because you have
>
> a) tried to include an `span' element where it is not allowed
> (outside of a block-level element)

Ignore this one, it doesn't apply here. `p' is sufficient for `span' to
occur in it.

> b) not ended the `span' element in the `li' element.
> c) not escaped the ETAGO delimiter.

PointedEars
--
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.
-- Richard Cornford, cljs, <cife6q$253$1$8300dec7(a)news.demon.co.uk> (2004)

|
Pages: 1
Prev: validating a form, one required field , another field if searched on requires both fields
Next: validating a form, one required field 2