By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,704 Members | 1,122 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,704 IT Pros & Developers. It's quick & easy.

How To Insert Code With Javascript, How to insert into a div an amountof code

P: n/a
i,
I have the next html page
<html>
<head>
<script>
<!--
function insertcode()
{
var code ="<p> blablabal babala babababab</p><h1>here comes
header</h1><span>fadfafa<a href=\"fadfaf\">anchor</a>blalbababa</span>"
var myText = document.createTextNode(code);
document.getElementById("content").appendChild(myT ext);
}
-->
</script>
</head>
<body>
<div id="content">
</div>
<a href="javascript:insertcode()">Insert Code</a>
</body>
</html>

This code insert the data as text. The html tags are not treated like
markup. I need to insert the code in a time. I mean i CAN NOT go tag per
tag. (E.g. document.createElement("p")... )
Is there any method to insert a pice of html code into a div and keep it
like code not like text in Javascript?
I hope you understand my problem. If not please tell me. Thanks in
advanced for your help.

Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
"Sergio del Amo" <se***@sbox.tugraz.at> wrote in message
news:42***********************@aconews.univie.ac.a t...
i,
I have the next html page
<html>
<head>
<script>
<!--
function insertcode()
{
var code ="<p> blablabal babala babababab</p><h1>here comes
header</h1><span>fadfafa<a href=\"fadfaf\">anchor</a>blalbababa</span>"
var myText = document.createTextNode(code);
document.getElementById("content").appendChild(myT ext);
}
-->
</script>
</head>
<body>
<div id="content">
</div>
<a href="javascript:insertcode()">Insert Code</a>
</body>
</html>

This code insert the data as text. The html tags are not treated like
markup. I need to insert the code in a time. I mean i CAN NOT go tag per
tag. (E.g. document.createElement("p")... )
Is there any method to insert a pice of html code into a div and keep it
like code not like text in Javascript?
I hope you understand my problem. If not please tell me. Thanks in
advanced for your help.

Will this help? Watch for word-wrap.

<html>
<head>
<title>inner.html</title>
<script type="text/javascript">
function insertcode() {
var code ="<p> blablabal babala babababab</p>";
code += "<h1>here comes header</h1>";
code += "<span>fadfafa<a href=\"fadfaf\">anchor</a>blalbababa</span>";
document.getElementById("content").innerHTML = code;
}
</script>
</head>
<body>
<div id="content">
<a href="javascript:insertcode()">Insert Code</a>
</div>
</body>
Jul 23 '05 #2

P: n/a
> "Sergio del Amo" <se***@sbox.tugraz.at> wrote:
news:42***********************@aconews.univie.ac.a t....

<script>
<!--
function insertcode()
{
var code ="<p> blablabal babala babababab</p><h1>here comes
header</h1><span>fadfafa<a
href=\"fadfaf\">anchor</a>blalbababa</span>" var myText =
document.createTextNode(code);
document.getElementById("content").appendChild(myT ext); }
-->
</script>


<script>
<!--
function insertcode()
{
var code ="<p> blablabal babala babababab</p><h1>here comes header</h1><span>fadfafa<a
href=\"fadfaf\">anchor</a>blalbababa</span>"
document.getElementById("content").innerHTML = document.getElementById("content").innerHTML+code
}
-->
</script>

--
BootNic Monday, May 23, 2005 2:21 PM

If we were not meant to make mistakes we would not have a Department of Corrections.
*Unknown**
Jul 23 '05 #3

P: n/a
Sergio del Amo wrote:
I have the next html page
You mean a HTML _document_ which may be displayed as many pages and
which is invalid, BTW:
<html>
The DOCTYPE declaration is missing before that tag.

<http://validator.w3.org/>
<head>
<script>
The `type' attribute is missing.
<!--
Scripts do not need and should not to be commented out this way.
function insertcode()
{
var code ="<p> blablabal babala babababab</p><h1>here comes ^^
The `script' element is considered to end here in SGML, so
you have to escape ETAGO delimiters within CDATA content.
header</h1><span>fadfafa<a href=\"fadfaf\">anchor</a>blalbababa</span>"
var myText = document.createTextNode(code);
1. You have not tested for the existence of the host method
document.createTextNode() before calling it. This is error-prone.

<http://pointedears.de/scripts/test/whatami>

2. This will create a _text node_, not child elements. If you still want to
create child elements that way, you can use the proprietary `innerHTML'
property; however, I strongly recommend to use standardized DOM methods
instead.
document.getElementById("content").appendChild(myT ext);
Same here: Feature tests have not been performed prior.
} -->
This is a syntax error as `--' is the decrement operator, and `>'
is not a valid operand. Remove that line, you don't need it.
</script>
</head>
<body>
<div id="content">
</div>
<a href="javascript:insertcode()">Insert Code</a>
Don't use the proprietary `javascript:' URI scheme, use standardized event
handlers, here: onclick. Note that this "link" does not work without
client-side script support, so you better also include it using scripting.
</body>
</html>

This code insert the data as text. The html tags are not treated like
markup.
See above: works as designed.
I need to insert the code in a time.
Why?
I mean i CAN NOT go tag per tag. (E.g. document.createElement("p")... )


Why not? Laziness?
PointedEars
Jul 23 '05 #4

P: n/a
DU
Sergio del Amo wrote:
i,
I have the next html page
<html>
Your document has no doctype declaration.
<head>
<script>
You're missing type attribute here.
<!--
function insertcode()
{
var code ="<p> blablabal babala babababab</p><h1>here comes
header</h1><span>fadfafa<a href=\"fadfaf\">anchor</a>blalbababa</span>"
var myText = document.createTextNode(code);
document.getElementById("content").appendChild(myT ext);
}
This is definitively not best and not correct. If you want to
dynamically insert a block of markup code, then you don't need and
certainly should not create a text node which is markup code: it's
incoherent. Also, as coded, your insertcode function will fail markup
validation. Best is to use DOM 1/2 attributes and methods.
How about:

function InsertCode()
{
if(document.createElement && document.appendChild)
{
var objParg = document.createElement("p");
objParg.appendChild(document.createTextNode(" blablabal babala babababab"));
var objH1 = document.createElement("h1");
objH1.appendChild(document.createTextNode("here comes header"));
var objSpan = document.createElement("span");
objSpan.appendChild(document.createTextNode("fadfa fa"));
var objLink = document.createElement("a");
objLink.href = "fadfaf"; /* obviously, this will require a real working
value */
objSpan.appendChild(document.createTextNode("ancho r"));
objSpan.appendChild(objLink);
objSpan.appendChild(document.createTextNode("blalb ababa"));
document.getElementById("content").appendChild(obj Parg);
document.getElementById("content").appendChild(obj H1);
document.getElementById("content").appendChild(obj Span);
};
}

Not tested but I've done often similar code in MSIE 6, Opera 7+, Firefox
1.x, Netscape 7+ and Mozilla-based browsers before and I am almost 100%
sure it will work in those mentionned browsers.
-->
</script>
</head>
<title></title> is mandatory.
<body>
<div id="content">
</div>
<a href="javascript:insertcode()">Insert Code</a>
Using "javascript:" pseudo-protocol is always wrong, incorrect unless
you want to create a bookmarklet.
http://jibbering.com/faq/#FAQ4_24
Protocol scheme "javascript:" will be reported as an error by link
validators and link checkers.
</body>
</html>

This code insert the data as text.
And that data text is markup code...

The html tags are not treated like markup. I need to insert the code in a time. I mean i CAN NOT go tag per
tag. (E.g. document.createElement("p")... )
Why not? This is what I would recommend and what I personally would do.
Is there any method to insert a pice of html code into a div and keep it
like code not like text in Javascript?
innerHTML is a shortcut but that isn't in the DOM specs.
I hope you understand my problem. If not please tell me. Thanks in
advanced for your help.


I understand well your problem. But I must say that your html code could
be improved a lot.

DU
--
The site said to use Internet Explorer 5 or better... so I switched to
Firefox 1.0.4 :)
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.