CODEWITHSUNDEEP
javascripthtml
user3211740
user3211740

Reputation: 175

Insert html into div tags?

Could I have div tags in my html code like:

<html>
      <script type="text/javascript" src="insertHtml.js"></script>
      <div id="insertHTML">
           //html gets insterted here
      </div>
</html>

And when the page loads a function in the insertHtml.js adds html to the page?

In insertHtml.js:

function addHtml(){
  <center> 
    <table border="0" cellpadding="0" cellspacing="0">
       <tr>
          <td width="480" height="26" background="top.png" 
              onclick="window.open('http://www.google.com','_blank');" 
              valign="center" style="cursor: pointer;border:none">
          </td>
       </tr>
    </table>

    <img src= "b1.png" name="b1" id="b1" width="120" height="120" 
         onclick="clicked(1)" style="cursor: pointer;border:none"/>

    <img src= "b2.png" name="b2" id="b2" width="120" height="120" 
         onclick="clicked(2)" style="cursor: pointer;border:none"/>

    <img src= "b3.png" name="b3" id="b3" width="120" height="120" 
         onclick="clicked(3)" style="cursor: pointer;border:none"/>

    <img src= "b4.png" name="b4" id="b4" width="120" height="120" 
         onclick="clicked(4)" style="cursor: pointer;border:none"/>

    <table border="0" cellpadding="0" cellspacing="0">
      <tr>
         <td width="480" height="45" background="bottom.png" 
             style="border:none" valign="center">
           <center>
               <font face="courier" size="3" color="black"> 
                  Enter name <span id="name">Name </span> Name: &nbsp; 
               </FONT>
               <input type="text" name="myname" id="myname" value=""+ name +"" size="41">
               <button type="button" onclick="copyName()">Copy</button>
           </center>
        </td>
      </tr> 
    </table>
  </center>
}

So basically what I want to be able to do is when the script is ran it would add html content into the div?

Upvotes: 0

Views: 913

Answers (3)

Night
Night

Reputation: 749

add the body tag to your HTML file:

<body onload="addHTML()">...</body>

.js:

function addHtml()
 {

 document.getElementById("InsertHTML").innerHTML='<center>'+
  '<table border="0" cellpadding="0" cellspacing="0">' +
  '<tr>' +
  '<td width="480" height="26" background="top.png" onclick="window.open('http://www.google.com','_blank');" valign="center" style="cursor: pointer;border:none">'  +
 '</td>' +
 '</tr>' +
 '</table>' +
 '<img src= "b1.png" name="b1" id="b1" width="120" height="120" onclick="clicked(1)" style="cursor: pointer;border:none"/><!----><img src= "b2.png" name="b2" id="b2" width="120" height="120"  onclick="clicked(2)" style="cursor: pointer;border:none"/><!----><img src= "b3.png" name="b3" id="b3" width="120" height="120"  onclick="clicked(3)" style="cursor: pointer;border:none"/><!----><img src= "b4.png" name="b4" id="b4" width="120" height="120"  onclick="clicked(4)" style="cursor: pointer;border:none"/>' +
  '<table border="0" cellpadding="0" cellspacing="0">' +
 '<tr>' +
 '<td width="480" height="45" background="bottom.png" style="border:none" valign="center">' +
  '<center>' +
  '<font face="courier" size="3" color="black"> Enter name <span id="name">Name </span> Name: &nbsp; </FONT><input type="text" name="myname" id="myname" value=""+ name +"" size="41">' +
  '<button type="button" onclick="copyName()">Copy</button>' +
  '</center>' +
  '</td>' +
  '</tr>' +
  '</table>' +
  '</center>';
 }

or you could create a septate string:

var $str = "Hello World"
document.getElementById("InsertHTML").innerHTML = str

Read Multi-line strings: http://davidwalsh.name/multiline-javascript-strings

Upvotes: 1

Sampson
Sampson

Reputation: 268462

This is indeed possible. You would be wiser to place the markup in its own .html file, and asynchronously read the contents of that file with an XMLHttpRequest (XHR). You then copy those contents to the .innerHTML property of your desired div element.

Given the different implementations of XHR in various browsers, it would be wiser to use an abstracted approach through a tool like jQuery.

$(function () {
    $.get("contents.html").then(function( data ) {
        $("myDiv").html( data );
    });
});

The outer portion $(function(){ ... }); will execute an anonymous function once the document has loaded. Inside, we call $.get to read the contents of a file (contents.html). Once that process has been completed, we set the resulting data as the innerHTML of #myDiv via jQuery's $.fn.html method.

Upvotes: 1

php-dev
php-dev

Reputation: 7156

Yes it is possible, in two steps.

1- Attach a dom-ready event handler

<body onload="addHtml()">

2- In you JS function, select the target div and insert code in it : 

var htmlStr = '<strong>Code</strong>';
document.getElementById('insertHTML').innerHTML = htmlStr;

Hope it helps.

Upvotes: 1

Related Questions