ansaurus

Question

Answer 1

+1 A:

The cleaner approach is going to be to separate them:

<div id="image1">
<SCRIPT LANGUAGE="JavaScript">  
     DynamicImage1(xx)
</SCRIPT>
</div>

<div id="image2">
<SCRIPT LANGUAGE="JavaScript">  
     DynamicImage2(xx)
</SCRIPT>
</div>

<div id="image3">
<SCRIPT LANGUAGE="JavaScript">  
     DynamicImage3(xx)
</SCRIPT>
</div>

Then style them using CSS; use float:left to put them in a row and add padding:right to space them out.

I said this was the clean way; the less-clean way is to keep what you have but add document.write(" ") in between each image.

JacobM 2009-02-13 20:19:37

Seriously, there are a lot cleaner ways involving less markup, less CSS, and more code reuse.

annakata 2009-02-13 20:54:19

For example, set `img.foo { display: block; float: left; padding-right: 10px; }` rather than wrapping them in divs.

Ben Blank 2009-02-13 21:18:16

Answer 2

+1 A:

Instead of writing code directly on page, create common container (say, < div id="images_container" >< / div >) with unique id and write images HTML one by one into this container using innerHTML property.

Sergii 2009-02-13 20:19:47

Answer 3

+1 A:

Ugh. Don't use inline scripts where you avoid them, and don't use innerHTML when direct DOM creation and insertion is available. And use CSS to handle the positionin/spacin aspect. Images already display inline, so wrapping divs around them individually is just complicating things.

Without knowing what your method does, I'm guessing, but this is what you should be doing roughly:

<head>
    <script>
    function createImage(t,params)
    {
      var img = document.createElement('img');
      /* season img to taste (e.g. img.src = params.source? */
      t.appendChild(img);
    }

    /* bind this method to onload event or better a ready event */
    function exec()
    {
      var t = document.getElementByid('target');
      createImage(t,xx);
      createImage(t,yy);
      createImage(t,zz);
    }
    </script>
    <style>
    /* I'm not advocating px here and these are just example values */
    #target {width: 600px; text-align: center;}
    #target img {border: 0px; margin: 0 10px; } /* the margin handles the spacing */
    </style>
</head>
<body>
    <div id="target"></div>
</body>

JS DOM methods reference

Why is innerHTML bad? Whilst it's true it can be faster, it's not always true, and it's close anyway, but then speed isn't really the problem with JS. However innerHTML:

opens up an injection attack
can create memory leaks when it destroys pre-existing elements with event handlers
being string based is error prone
doesn't return a reference to what you just inserted, and can't clone

annakata 2009-02-13 20:52:49

"don't use innerHTML when direct DOM creation and insertion is available" — Unless speed becomes an issue. innerHTML is still much, much faster than DOM calls in most browsers.

Ben Blank 2009-02-13 21:20:13

answered in the edit - as always benchmark where it matters, and everything has an application sometimes

annakata 2009-02-13 21:50:28

ansaurus

tags:

views:

answers:

javascript in html spacing

related questions