Question:insert innerHTML by condition

**fdi** · 12-29-2007, 02:02 PM

hello all

I have table with one row and 5 columns.
I want to add an innerHtml if the 'td' have specific image
how can I do it?

Code:

var _NEW="<table ><tr><td>Hello</td><td rowspan=2>THERE</td></tr><tr><td> Look here</td></tr></table>";
function Addobject()
{
for(var i=1;i<=5;i++)
{
   if(what is the condtion should be)
       document.getElementById("td_id_"+i).innerHTML=_NEW;
}
}

thanks alot

**Twey** · 12-29-2007, 02:25 PM

Don't use innerHTML. It has many issues, one of which is that it doesn't work properly with tables in IE.

**fdi** · 12-29-2007, 02:28 PM

thank you for your reply

what can I use to do that ?

**molendijk** · 12-29-2007, 06:38 PM

Hello FDI,

innerHTML is not necessarily bad if you know how to use it. Most of the time, it's much faster than "real" W3C DOM methods, see also this.

Anyhow, this would work (if that's what you want):

Code:

<html> (give a doctype here)
<head>
<script type="text/javascript">
var _NEW="<table ><tr><td>Hello</td><td rowspan=2>THERE</td></tr><tr><td> Look here</td></tr></table>";
function Addobject()
{
for(var i=1;i<=5;i++)
{   if(document.getElementById('image')){document.getElementById('td_id_').innerHTML=_NEW}
    if(document.getElementById('image'+i)){document.getElementById('td_id_'+i).innerHTML=_NEW }
}
}
window.onload=Addobject
</script>

</head>

<body>
<table border=1>
<tr>
<td id="td_id_"><img id="image" src="some.gif"></td>
<td id="td_id_1"><img id="image1" src="some.gif"></td>
<td id="td_id_2"><img id="image2" src="some.gif"></td>
<td id="td_id_3"><img id="image3" src="some.gif"></td>
<td id="td_id_4"><img id="image4" src="some.gif"></td>
</tr>
</table>
</body>

</html>

Give one of the images a wrong ID (for instance: immage2 instead of image2) and you'll see what I mean.

Arie Molendijk.

**Twey** · 12-29-2007, 08:53 PM

innerHTML is not necessarily bad if you know how to use it.

It is. See http://slayeroffice.com/articles/inn..._alternatives/.

Most of the time, it's much faster than "real" W3C DOM methods, see also [a benchmark].

Yes; however, it's conceptually very inefficient, meaning that the DOM methods can (and probably will, with the growing emphasis on standards) be optimised to be much more efficient.

**molendijk** · 12-29-2007, 11:41 PM

But innerHTML is so easy! And FF supports innerHTML for XHTML documents. As someone said somewhere: 'I’d rather save myself the time of having to code 20 lines of createElement/appendChild’s when a single innerHTML will suffice'.
That being said, I admit that innerHTML is not part of the W3C DOM. But what about Ajax?

Arie Molendijk.

**tech_support** · 12-30-2007, 12:27 AM

I find people who use innerHTML to create elements are lazy.

**Twey** · 12-30-2007, 12:28 AM

As someone said somewhere: 'I’d rather save myself the time of having to code 20 lines of createElement/appendChild’s when a single innerHTML will suffice'.

It's perfectly simple to write a helper function that makes using the DOM a lot more fun. I usually use something simple and lightweight like:

Code:

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

var jsonToDom = (function() {
  var TAG = 0, ATTRS = 1, CHILDREN = 2;

  function addTo(parent) {
    return function(x) {
      return parent.appendChild(jsonToDom(x));
    };
  }

  function jsonToDom(o) {
    if(typeof o === "string")
      return document.createTextNode(o);

    var r;

    if(o[TAG] instanceof Array) {
      r = document.createDocumentFragment();
      map(addTo(r), o);
    } else {
      r = document.createElement(o[TAG]);

      for(var x in o[ATTRS])
        if(o.hasOwnProperty(x))
          r[x] = o[x];

      map(addTo(r), o[CHILDREN]);
    }

    return r;
  }

  return jsonToDom;
})();

... but if you wanted to be really interoperable, you could use JsonML, which has a sample converter for DOM.

That being said, I admit that innerHTML is not part of the W3C DOM. But what about Ajax?

AJAX is a methodology, not a technology, and thus does not require a standard. The technology that makes it possible, the XMLHttpRequest object, is being standardised as I type.

Edit: Use for jsonToDom():

Code:

myElement.innerHTML += "<p class=\"foo\" name=\"bar\" style=\"baz\"><span id="quux" onclick=\"alert("Hi!");\">Quuux</span>Quuuux</p>"; // becomes: myElement.appendChild(jsonToDom(["p", {className: "foo", name: "bar", cssString: "baz"}, [["span", {id: "quux", onclick: function(e) { alert("Hi!"); }}, ["Quuux"]], "Quuuux"])); // or, if you've been using innerHTML so long you hate actual code formatting, myElement.appendChild(jsonToDom(["p", {className: "foo", name: "bar", cssString: "baz"}, [["span", {id: "quux", onclick: function(e) { alert("Hi!"); }}, ["Quuux"]], "Quuuux"]));

Slightly more verbose, but much easier to format, no ugly quote escapes, and doesn't erase and recreate every other child in myElement.

**jscheuer1** · 12-30-2007, 12:35 AM

Regardless of how you feel about innerHTML, the fact remains that it will often mess up forms, and that it isn't supported in IE for any table elements.

On the plus side, it is fast and efficient when it will work, and so far as I can tell, virtually essential for many Ajax implementations.

**molendijk** · 12-30-2007, 02:06 AM

May I conclude from the fact that DD offers scripts like the Ajax pagination script (in which innerHTML is crucial) that the use of innerHTML is not essentially wrong while, at the same time, DD-representatives dont't like it, to say the least?

Arie Molendijk.

Thread: Question:insert innerHTML by condition

Thread Tools

Search Thread

Question:insert innerHTML by condition

Bookmarks

Bookmarks

Posting Permissions