Insert html into div tags?
Question
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:
</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?
3 answers
solution1
1 ACCPTED 2014-01-29 15:25:52
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.
solution2
1 2014-01-29 15:26:18
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.
solution3
1 2014-01-29 15:34:14
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: </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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.