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

S

Sergio del Amo

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(myText);
}
-->
</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.
 
M

McKirahan

Sergio del Amo said:
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(myText);
}
-->
</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>
 
B

BootNic

Sergio del Amo said:
<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(myText); }
-->
</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>
 
T

Thomas 'PointedEars' Lahn

Sergio said:
I have the next html page

You mean a HTML _document_ which may be displayed as many pages and
which is invalid, BTW:

The DOCTYPE declaration is missing before that tag.

<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(myText);

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
 
D

DU

Sergio said:
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(myText);
}

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("fadfafa"));
var objLink = document.createElement("a");
objLink.href = "fadfaf"; /* obviously, this will require a real working
value */
objSpan.appendChild(document.createTextNode("anchor"));
objSpan.appendChild(objLink);
objSpan.appendChild(document.createTextNode("blalbababa"));
document.getElementById("content").appendChild(objParg);
document.getElementById("content").appendChild(objH1);
document.getElementById("content").appendChild(objSpan);
};
}

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>

<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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,731
Messages
2,569,432
Members
44,835
Latest member
KetoRushACVBuy

Latest Threads

Top