CODEWITHSUNDEEP
innerhtml
user1480481
user1480481

Reputation: 1

Alternative to innerHTML for IE

I create HTML documents that include proprietary tags for links that get transformed into standard HTML when they go through our publishing system. For example:

<LinkTag contents="Link Text" answer_id="ID" title="Tooltip"></LinkTag>

When I'm authoring and reviewing these documents, I need to be able to test these links in a browser, before they get published. I wrote the following JavaScript to read the attributes and write them into an <a> tag:

var LinkCount = document.getElementsByTagName('LinkTag').length; 
for (i=0; i<LinkCount; i++) { 

var LinkText = document.getElementsByTagName('LinkTag')[i].getAttribute('contents');
var articleID = document.getElementsByTagName('LinkTag')[i].getAttribute('answer_id');
var articleTitle = document.getElementsByTagName('LinkTag')[i].getAttribute('title');

document.getElementsByTagName('LinkTag')[i].innerHTML = '<a href="publishing_system_url_id='+ articleID +' title="' + articleTitle + '">' + LinkText + '</a>';
}

This works great in Firefox, but not in IE. I've read about the innerHTML issue with IE and imagine that's the problem here, but I haven't been able to figure a way around it. I thought perhaps jQuery might be the way to go, but I'm not that well versed in it.

This would be a huge productivity boost if I could get this working in IE. Any ideas would be greatly appreciated.

Upvotes: 0

Views: 2896

Answers (5)

Khyati
Khyati

Reputation: 61

  1. This one is the best : elm.insertAdjacentHTML( 'beforeend', str );

  2. In case your element size is very small :elm.innerHTML += str;

Upvotes: -1

VasyambaTula
VasyambaTula

Reputation: 13

I have this xmlObject:

<c:value i:type="b:AccessRights">ReadAccess WriteAccess AppendAccess AppendToAccess CreateAccess DeleteAccess ShareAccess AssignAccess</c:value>

I find value use this: responseXML.getElementsByTagNameNS("http://schemas.datacontract.org/2004/07/System.Collections.Generic",'value')[0].firstChild.data

Upvotes: 0

dane
dane

Reputation: 631

I wrote a script I have on my blog which you can find here: http://blog.funelr.com/?p=61 anyways take it a look it automatically fixes ie innerHTML errors in ie8 and ie9 by hijacking ie's innerHTML property which is "read-only" for table elements and replacing it with my own.

Upvotes: 0

NoBugs
NoBugs

Reputation: 9496

DOM functions might be considered more "clean" (and faster) than simply replacing the innerHTML in cases like this. Something like this may work better for you:

// where el is the element you want to wrap with <a link.
newel = document.createElement('a')
el.parentNode.insertBefore(newel,prop);
el = prop.parentNode.removeChild(prop);
newel.appendChild(prop);
newel.setAttribute('href','urlhere');

Similar code worked fine for me in Firebug, it should wrap the element with <a> ... </a>.

Upvotes: 0

StuckAtWork
StuckAtWork

Reputation: 1633

innerHTML only works for things INSIDE of the open/close tags. So for instance if your LinkTag[i] is an <a> element, then putting innerHTML="<a .... > </a> would put that literally between the <a tag=LinkTag> and </a>.

You would need to put that in a DIV. Perhaps use your code to draw from links, then place the corresponding HTML code into a div.

var LinkCount = document.getElementsByTagName('LinkTag').length; 
for (i=0; i<LinkCount; i++) { 

var LinkText = document.getElementsByTagName('LinkTag')[i].getAttribute('contents');
var articleID = document.getElementsByTagName('LinkTag')[i].getAttribute('answer_id');
var articleTitle = document.getElementsByTagName('LinkTag')[i].getAttribute('title');

document.getElementsById('MyDisplayDiv')[i].innerHTML = '<a href="publishing_system_url_id='+ articleID +' title="' + articleTitle + '">' + LinkText + '</a>';

This should produce your HTML results within a div. You could also simply append the other LinkTag elements to a single DIV to produce a sort of "Preview of Website" within the div.

document.getElementsById('MyDisplayDiv').innerHTML += '<a href="publishing_system_url_id='+ articleID +' title="' + articleTitle + '">' + LinkText + '</a>';

Note the +=. Should append your HTML fabrication to the DIV with ID "MyDisplayDiv". Your list of LinkTag elements would be converted into a list of HTML elements within the div.

Upvotes: 2

Related Questions