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

Discussion in 'Javascript' started by Sergio del Amo, May 23, 2005.

  1. 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.
     
    Sergio del Amo, May 23, 2005
    #1
    1. Advertising

  2. Sergio del Amo

    McKirahan Guest

    Re: How To Insert Code With Javascript, How to insert into a div an amount of code

    "Sergio del Amo" <> wrote in message
    news:4292128d$0$10836$...
    > 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>
     
    McKirahan, May 23, 2005
    #2
    1. Advertising

  3. Sergio del Amo

    BootNic Guest

    Re: How To Insert Code With Javascript, How to insert into a div an amount of code

    > "Sergio del Amo" <> wrote:
    > news:4292128d$0$10836$....
    >
    > <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>

    --
    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**
     
    BootNic, May 23, 2005
    #3
  4. Re: How To Insert Code With Javascript, How to insert into a div an amount of code

    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(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
     
    Thomas 'PointedEars' Lahn, May 28, 2005
    #4
  5. Sergio del Amo

    DU Guest

    Re: How To Insert Code With Javascript, How to insert into a divan amount of code

    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(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>


    <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 :)
     
    DU, May 29, 2005
    #5
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    776
  2. Jon
    Replies:
    2
    Views:
    198
  3. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    208
    David Dorward
    Jun 1, 2005
  4. Replies:
    2
    Views:
    111
  5. mscir
    Replies:
    3
    Views:
    334
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page