Thanks John.

[robin9000]

I would like to take the following html coding and make it into a java script document. Dose any one know how to do this? If it's not possible pelease let me know.

<p>The contents of this website are Copyright &copy; 2009, Robin's Den
<a href="">Privacy Policy</a> |
<a href="">Terms of use</a> |
<a href="">Disclaimer</a> |
<a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">XHTML</a> |
<a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS">CSS</a></p>

[Master_script_maker]

What do you mean? Would you like the javascript to write this?

[djr33]

If your method isn't working, it's a much better idea to tell us what you are trying to accomplish, rather than showing us (limited) progress on a method that may or may not work-- as above, please tell us what you want to do, and perhaps how you want to do it, so we can answer-- as if, there's no javascript, and I don't see why that html wouldn't work, unless you need it to do something else.

[jscheuer1]

<script type="text/javascript">
document.write('<div id="val_$_val"><\/div>');
(function(d){
 var p = document.createElement('p'), a = [document.createElement('a')];
 a[0].href = '';
 for(var i = 0; i < 4; ++i)
  a.push(a[0].cloneNode(true));
 a[0].appendChild(document.createTextNode('Privacy Policy'));
 a[1].appendChild(document.createTextNode('Terms of use'));
 a[2].appendChild(document.createTextNode('Disclaimer'));
 a[3].href = 'http://validator.w3.org/check/referer';
 a[3].title = 'This page validates as XHTML 1.0 Transitional';
 a[3].appendChild(document.createTextNode('XHTML'));
 a[4].href = 'http://jigsaw.w3.org/css-validator/check/referer';
 a[4].title = 'This page validates as CSS';
 a[4].appendChild(document.createTextNode('CSS'));
 p.appendChild(document.createTextNode('The contents of this website are Copyright \xa9 2009, Robin\'s Den '));
 for(var i = 0; i < 5; ++i){
  p.appendChild(a[i]);
  if (i < 4)
   p.appendChild(document.createTextNode(' | '));
 }
 d.appendChild(p);
})(document.getElementById('val_$_val'));
</script>

[djr33]

Why such complex code, John? Can't just output it all as a string?
On the other hand, perhaps a function that would automatically output it like you just wrote, but using any input and dynamically parsing it, would be a very useful addition to the library, if that's something possible for you to write (or perhaps the input can be too varied to really work like that).

[jscheuer1]

I prefer using the DOM, that's all. In this case (depending upon how the final code using other approaches is written) it probably won't make a lot of difference. However, it is a failsafe method in that the tags written will conform to the DOCTYPE in use for the page. Using innerHTML or document.write() cannot guarantee that, and the p element is very tricky in HTML and XHTML, best to append to it, as it has a nasty habit of self closing earlier than expected if you aren't careful how you document.write/innerHTML it and its contents to the page. It will do so anyway if you don't respect its rule about being incapable of containing another block level element.

Incidentally - I recommend against the XHTML DOCTYPE implied by the OP's code.

[robin9000]

Wow is all I got to say John I did not even think it possible. Thanks dose not quite say enough. You are absolutly brillent. It works perfectly. Thanks.

[Twey]

John: you can see here that you have a pattern: create link, add href, add text, append link; and also that you have some code that's basically non-flat but that has had to be flattened, harming readability. A good thing to do in these situations is to abstract out:

<div id="val_$_val"></div>

<script type="text/javascript">
  Function.id = function(a) { return a; };


  Array.map = function(f, a) {
    for (var i = 0, r = []; i < a.length; ++i)
      r[i] = f(a[i]);

    return r;
  };

  Array.intersperse = function(el, a) {
    if (a.length < 2)
      return a;

    for (var i = 1, r = [a[0]]; i < a.length; ++i) 
      r.push(el, a[i]);

    return r;
  };


  var Dom = (function() {
    function get(a) {
      return document.getElementById(a);
    }

    var attrmap = {
      class: "className"
      // &c.
    };

    function applyAttributes(el, attrs) {
      for (var x in attrs)
        if (attrs.hasOwnProperty(x))
          if (x === "style")
            el.setAttribute("style", el.style.cssText = attrs[x]);
          else
            el[attrmap[x] || x] = attrs[x];

      return el;
    }

    function addChildren(el, children, filter) {
      Array.map(function(child) {
        if (!child) return;

        if (child = create(child))
          el.appendChild(child);
      }, children);
    }

    function create(el, filter) {
      if (typeof el === "string")
        return document.createTextNode(el);

      if (!(el instanceof Array))
        return el;

      filter = filter || Function.id;

      var r        = document.createElement(el[0]),
          attrs    = el[1],
          children = el[2];

      applyAttributes(r, attrs);

      addChildren(r, children, filter);

      return filter(r);
    }

    function link(contents, href, title) {
      return ["a", {href: href, title: title}, [contents]];
    }

    return {
      create: create,
      get: get,
      link: link
    };
  })();


  // Elements are expressed as an array of three elements:
  // [tagName : string, attributes : Object, children : Array]
  Dom.get("val_$_val").appendChild(Dom.create(
    ["p", {}, Array.intersperse(" | ",
      [Dom.link("Privacy Policy"),
       Dom.link("Terms of Use"),
       Dom.link("Disclaimer"),
       Dom.link("XHTML",
                "http://validator.w3.org/check/referer",
                "This page validates as XHTML 1.0 Transitional"),
       Dom.link("CSS",
                "http://jigsaw.w3.org/css-validator/check/referer",
                "This page validates as CSS 2")]
  ]));
</script>

As you can see, this greatly improves legibility and removes redundancy from the code.

Untested, weird bugs may exist.

[jscheuer1]

Legibility?

Ahem. Definitely in the eye of the beholder. I did think though, "Who really wants links with href = ''?"

But those could easily be added following the pattern, eliminating the need for:

a[0].href = '';

where it currently appears in my code, and true in the cloneNode line, which could then become false.

An object or array of the link properties could also be used if desired:

<script type="text/javascript">
document.write('<div id="val_$_val"><\/div>');
(function(d){
 var p = document.createElement('p'), a = [document.createElement('a')],
 links = [ // declare href, text, title:
  ['', 'Privacy Policy', ''],
  ['', 'Terms of use', ''],
  ['', 'Disclaimer', ''],
  ['http://validator.w3.org/check/referer', 'XHTML', 'This page validates as XHTML 1.0 Transitional'],
  ['http://jigsaw.w3.org/css-validator/check/referer', 'CSS', 'This page validates as CSS']
 ];
 p.appendChild(document.createTextNode('The contents of this website are Copyright \xa9 2009, Robin\'s Den '));
 for(var i = 0; i < links.length; ++i){
  a[i].href = links[i][0];
  a[i].appendChild(document.createTextNode(links[i][1]));
  a[i].title = links[i][2];
  p.appendChild(a[i]);
  if (i < links.length - 1){
   p.appendChild(document.createTextNode(' | '));
   a.push(a[0].cloneNode(0));
  }
 }
 d.appendChild(p);
})(document.getElementById('val_$_val'));
</script>

[Twey]

Legibility?

Ahem. Definitely in the eye of the beholder.

If you follow it through, the code, while ultimately more complex, is broken down into small, simple units — for example, the Dom.link() function just returns an array, a single statement. As such, it can be parsed with much less effort than a corresponding big block of code. You shouldn't even need to look at the more complex code: it's sufficiently modular that all you need to read to understand what's going on should be the utilising code, starting from the line Dom.get("val_$_val").appendChild(Dom.create(. The complex workings of the Dom module could be tucked neatly away in a separate file or something.

I did think though, "Who really wants links with href = ''?"

Yes, I wondered about that myself.