Recognizing elements and doing event handling for repeating templates
Formatting Improvements

I don't have time for a full review, but I will help with some of these formatting issues.

Quoted sources: Douglas Crockford



1... You've got some invalid code in there. "Quotes" in JavaScript can't span multiple lines.

Invalid:

var html="&lt;h1&gt;Chat Window&lt;/h1&gt; &lt;div&gt; &lt;p&gt;&lt;/p&gt;
&lt;textarea rows='4' cols='50'&gt;  &lt;/textarea&gt;     
&lt;input type='button' value='send'&gt;&lt;/div&gt;";


Valid:

var html = "&lt;h1&gt;Chat Window&lt;/h1&gt; &lt;div&gt; &lt;p&gt;&lt;/p&gt;" +
        "&lt;textarea rows='4' cols='50'&gt;  &lt;/textarea&gt;" + 
        "&lt;input type='button' value='send'&gt;&lt;/div&gt;";




2... Assignment operators, =, should be padded by a space.

Messy:

html="


Neat:

html = "




3... Variable names should be human readable. 

Messy:

var e = document.getElementById('chatApp');


Neat:

var chatAppElem = document.getElementById('chatApp');




4... The parentheses of anonymous function literals should have one space of padding on either side.

Messy:

e.addEventListener("click", function(event){


Neat:

e.addEventListener("click", function (event) {



  If a function literal is anonymous, there should be one space between
  the word function and the ( (left parenthesis). If the space is
  omited, then it can appear that the function's name is function, which
  is an incorrect reading. -DC




5... Spaces should only be made in intervals of 4.

Messy:

  var e = document.getElementById('chatApp');
e.addEventListener("click", function(event){
 var chatWindows=document.getElementsByTagName('p');


Neat:

var e = document.getElementById('chatApp');
e.addEventListener("click", function(event){
    var chatWindows=document.getElementsByTagName('p');



  The unit of indentation is four spaces. Use of tabs should be avoided
  because (as of this writing in the 21st Century) there still is not a
  standard for the placement of tabstops. The use of spaces can produce
  a larger filesize, but the size is not significant over local
  networks, and the difference is eliminated by minification. -DC




6... Lines should be no longer than 80 characters.

Messy:

chatWindows[i].innerHTML+= "&lt;em&gt;Chat window&lt;/em&gt; {index} says: &lt;b&gt;"+ event.target.previousElementSibling.value+"&lt;/b&gt;&lt;br/&gt;";


Neat: 

chatWindows[i].innerHTML+= "&lt;em&gt;Chat window&lt;/em&gt; {index} says: &lt;b&gt;" +
    event.target.previousElementSibling.value+"&lt;/b&gt;&lt;br/&gt;";



  Avoid lines longer than 80 characters. When a statement will not fit
  on a single line, it may be necessary to break it. Place the break
  after an operator, ideally after a comma. A break after an operator
  decreases the likelihood that a copy-paste error will be masked by
  semicolon insertion. The next line should be indented 8 spaces. -DC




7... Comments should be used generously. And remember: "Why" not "How".

Bad Practice:

  var e = document.getElementById('chatApp');
e.addEventListener("click", function(event){
 var chatWindows=document.getElementsByTagName('p');
if(event.target.value=="send"){
    for(var i=0;i&lt;chatWindows.length;++i){
        chatWindows[i].innerHTML+= "&lt;em&gt;Chat window&lt;/em&gt; {index} says: &lt;b&gt;"+ event.target.previousElementSibling.value+"&lt;/b&gt;&lt;br/&gt;";
    }
    event.target.previousElementSibling.value=null;
}
},false);


Good Practice:

// Trigger a chat window when button is clicked.

var chatAppElem = document.getElementById('chatApp');      // Info about the purpose 
chatAppElem.addEventListener("click", function (event) {   // of significant lines
var chatWindows = document.getElementsByTagName('p');      // will be a plus later on.
if(event.target.value == "send"){
    for(var i = 0; i &lt; chatWindows.length; ++i){
        chatWindows[i].innerHTML+= "&lt;em&gt;Chat window&lt;/em&gt; {index} says: &lt;b&gt;" +
            event.target.previousElementSibling.value + "&lt;/b&gt;&lt;br/&gt;";
    }
    event.target.previousElementSibling.value = null;
}
},false);



  Be generous with comments. It is useful to leave information that will
  be read at a later time by people (possibly yourself) who will need to
  understand what you have done. The comments should be well-written and
  clear, just like the code they are annotating. An occasional nugget of
  humor might be appreciated. Frustrations and resentments will not.
  
  It is important that comments be kept up-to-date. Erroneous comments
  can make programs even harder to read and understand.
  
  Make comments meaningful. Focus on what is not immediately visible.
  Don't waste the reader's time with stuff like
  
  i = 0; // Set i to zero.
  
  Generally use line comments. Save block comments for formal documentation -DC