Solved

Alternative to .innerHTML ?

Posted on 2006-11-18
2
1,002 Views
Last Modified: 2012-08-13
Simple question.  Im using document.createElement("div").  I would like to add HTML and SCRIPT tag contents within this new tag container without using the non-standard .innerHTML property.  How can i acheive this?  I've read of a .nodeValue but it seems biased toward text only input.

Thanks.
0
Comment
Question by:ljaques
2 Comments
 
LVL 10

Accepted Solution

by:
ADSLMark earned 20 total points
ID: 17972732
I wouldn't worry too much about browser-support. If most commong browsers can handle it, why care? Anyway i googled it up for you:

http://www.javascriptkit.com/javatutors/dynamiccontent4.shtml

It seems it is possible, but they do not really seem fond.

You have a div like:
<div id="test">Old content</div>

Normally you would:
<script>document.getElementById("test").innerHTML="new content"</script>

New method would be:
function dynamiccontentNS6(elementid,content)
{
  if (document.getElementById && !document.all)
  {
    rng = document.createRange();
    el = document.getElementById(elementid);
    rng.setStartBefore(el);
    htmlFrag = rng.createContextualFragment(content);
   
    while (el.hasChildNodes())
      el.removeChild(el.lastChild);

    el.appendChild(htmlFrag);
  }
}

I hope the link provides enough information.
Mark
0
 
LVL 6

Expert Comment

by:aescnt
ID: 17975398
> "I would like to add HTML and SCRIPT tag contents within this new tag container"
You can't have an <html> inside another element (like a div). There can only be one <html> in a document. :)

I'm really not sure on what you're trying to do. But for example, if you're doing:

    var test = document.createElement("div");
    test.innerHTML='<script type="text/javascript" src=
"foo.js"></script>';

ADSLMark, I think the asker's concern is logical since IE doesn't fully support .innerHTML on elements that aren't on the tree. (i.e., in this example, the `test` variable hasn't been appended to `document`, so accessing it's .innerHTML in IE might produce errors.)

You can instead do:

    var test = document.createElement("div");
    var myscript = document.createElement("script");
    myscript.setAttribute('type', 'text/javascript'); /* this is the standard way to set attributes */
    myscript.setAttribute('src', 'foo.js');
    myscript.src = 'foo.js'; /* how IE wants attributes to be set */
    myscript.type = 'text/javascript';
    test.appendChild(myscript);

Tested on FF 1.5.0.8.
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Else condition 9 23
Generate Numbers in JQuery file 11 66
Not allowed to load local recource. 4 34
Hide Table in merge 3 31
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question