Experimenting with dynamic javascript: can I recursively dynamically include?

Question

function helloworld() {
    alert('hello world');
}

static html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="helloworld.js" type="text/javascript"></script>
</head>
<body>
    <form action="#">
     <input type="button" onclick="helloworld()" />
    </form>
</body>
</html>

1st conversion using http://accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/ works:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="helloworld.js" type="text/javascript"></script>
</head>
<body>
    <form action="#">

     <script type="text/javascript">
         document.write("<input type=\"button\" onclick=\"helloworld()\" \/>");
     </script>

    </form>
</body>
</html>

second conversion doesn't work:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="helloworld.js" type="text/javascript"></script>
</head>
<body>
    <form action="#">

     <script type="text/javascript">
document.write("     <script type=\"text\/javascript\">");
document.write("         document.write(\"<input type=\\"button\\" onclick=\\"helloworld()\\" \\/>\");");
document.write("     <\/script>");

     </script>

    </form>
</body>
</html>

Is it possible to correct the second code so that it can work ?

Why do you want to do this anyway? I don't even see a reason for the first "conversion". If it is what you want, stick with the first one, but users with JavaScript turned off will be quite annoyed... — Felix Kling, Oct 13 '10 at 13:09
It's considered to be bad form these days to use `document.write` - it slows down the page loading and parsing, and it's confusing to maintain. — andrewmu, Oct 13 '10 at 13:14
You seriously need to **stop using `document.write()`**. It's absolutely the wrong way of going about it. — Pointy, Oct 13 '10 at 13:28
@Pointy & andrewmu - i think he is only experimenting with JavaScript, you cannot use this kind of code in a real application. — Q_Mlilo, Oct 13 '10 at 13:38
Well experimenting with a strongly deprecated "feature" might be interesting for somebody who understands the language, but this person is clearly not an expert. He asked another question just a little while ago, and it too was filled with the same terrible ideas. — Pointy, Oct 13 '10 at 13:39
I'm not asking if it is the wrong way or not. Stop repeating articles that I read also (Ajaxian ...). Nothing is absolutly wrong or not it may depend on very specific context. That I will judge by myself. — user310291, Oct 13 '10 at 18:09
By the way someone said here "Online advertising makes extensive use of document.write() to dynamically write adverts into the page as it loads." http://stackoverflow.com/questions/367214/document-write-vs-inserting-dom-nodes-preserve-form-information. I don't opinions, I want precise technical answer (source code) to a precise answer. Seems some doesn't know the answer and just repeats what they read, remind of stock market forums ... — user310291, Oct 13 '10 at 18:10
@pointy sometimes deprecated way may save your life in a project when new way doesn't work as expected I have encountered the cases in a few live big projects to know it by experience. — user310291, Oct 13 '10 at 18:19
Taking your coding advice from online advertising snippets is not a good idea. The `document.write()` facility should be avoided; there are **many** far better ways of creating dynamic content. — Pointy, Oct 13 '10 at 18:32
BETTER depends on context. Some contexts may require to still use old school for example when you work for big corporates that require compatibility with very old browsers and you create own custom light frameworks. So stop with generalities and false judgement of what I would need, I will know by myself. — user310291, Oct 13 '10 at 20:40

Q_Mlilo · Answer 1 · 2010-10-13T13:33:58.437

2

<script type="text/javascript">
            document.write("     <script type=\"text\/javascript\">");
            document.write("document.write('<input type=\"button\" onclick=\"helloworld()\" />');");
            document.write("     <\/script>");
</script>

Will output

EDIT

After checking fire bug, the code below is what is produced.

<script type="text/javascript">
    document.write('<input type="button" onclick="helloworld()" />');     
</script>
<input onclick="helloworld()" type="button">

edited Oct 13 '10 at 13:33

answered Oct 13 '10 at 13:19

Q_Mlilo

1,729
4
23
26

That is already my first code so I want to know if I can iterate the same process anyhow (it may seem stupid but I like to push the enveloppe to see how the language behaves at extreme). – user310291 Oct 13 '10 at 18:15
1

"second conversion doesn't work:... Is it possible to correct the second code so that it can work ?" - If you run my code you will see that it works. Your code had problems with nesting and and double escapes(\\"). – Q_Mlilo Oct 14 '10 at 05:53

score 2 · Answer 2 · answered Oct 13 '10 at 13:19

2

How about:

      ..
      <form action='#'>
      </form>

      <script type="text/javascript">
        window.addEventListener('load', function() {
          var inp = document.createElement('input');
          inp.setAttribute('type', 'button');
          input.addEventListener('click', function() {
            ..
          }, false);

          document.forms[0].appendChild(inp);
        }, false);
      </script>

Sure, it's longer, but it's efficient and it's the "proper" way to do it (outside of using jQuery).

    </body>
  </html>

answered Oct 13 '10 at 13:19

andrewmu

14,276
4
39
37

Thank you very much for this very usefull source code I will study later on. I'm not saying that document.write is the way to go, I just want to experiment by myself all the ways I could do and do something stupid somehow but as I said below I like to test extreme cases to see how languages will cope with. – user310291 Oct 13 '10 at 18:13

Experimenting with dynamic javascript: can I recursively dynamically include?

2 Answers2