|
JavaScript - Difference Between Insert And Innerhtml?
Hi all,
I use JS to dynamically generate HTML such as a <select> dropdown menu. I do it by placing an empty element where I want the dropdown to appear (i.e. <span id="dropdown"></span>) then getElementById('dropdown') and insert the HTML with innerHTML = html. But I could also do it by getting the empty element and then doing an "insertBefore" or "appendChild" call. Is one "preferred" over the other? Is one "better" than the other? Thanks. -- Roger Similar TutorialsHello, I am trying to use JavaScript to change the content of a div on my page... By clicking on a button on the side, the text content of a div changes to describe the link and at the bottom of the text I want a link to a site to appear.. The text bit is fine but I cannot find a way of inserting an <a href> in there without unexpected syntax and illegal tag errors popping up! I thought this would be simple, (It probably is and I am just being an arse)... I have spent ages searching for solutions and tried everything I can think of but no luck :( So, here is the code... function change() { document.getElementById("text").innerHTML = "lots of text<br><a href="linktonewpage">some text</a>"; I did think that separating the link away from the text and putting it in a separate div might work but still no luck. I am pretty sure that it must be the quotation marks (or the =) surrounding the link but I don't know what I can do to sort that... A link needs to be surrounded by "" doesn't it??? Any help on this would be very appreciated as I am driving myself mad here! I apologise if this is super simple and I just being a 'noob' I really have spent hours trying to sort it! Many thanks Jamie How would you make a if for a input box =this do this Some if the input boxe value = this then get innerHTMl Hello, I am a newbie for Javascript. Currently I am doing a website which consists of a lot of contents. Therefore, I hope to get a solution which all my contents are arranged into a table (rows and columns). The condition is that there is only a html page to hold all the contents where there is a "view more" or 'next" button at the bottom and each times user can click to go to the different contents. I have tried to use the innerHTML and I was able to do for 2 pages only...Now I encountered a problem which I need to update more contents to more pages . Can you kindly give some guidelines according to this? Below shows the example code of my website: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" type="text/javascript">
function OpenWindow()
{
var content=document.getElementById('achieve').rows[0].cells;
content[1].innerHTML="<br/><div align='justify' class='style1 style8'><span class='style11'>Another content</span></div>" + "<div align='left' class='style23 style13'>more details</div>";
var content=document.getElementById('achieve').rows[1].cells;
content[1].innerHTML="";
var content=document.getElementById('achieve').rows[2].cells;
content[1].innerHTML="<strong><em><font class=style13 style23 color=#FF6600><a href='test.html'>back</a></font></em></strong>";
}
</script>
</head>
<body>
<!--id starts-->
<table id="achieve" width="780" height="387" border="0">
<tr>
<td width="10" height="39"> </td>
<td width="340"><div align="center" class="style6">My Title</div></td>
<td width="416"> </td>
</tr>
<tr>
<td> </td>
<td><div align="justify" class="style1 style8"><span class="style11">More Contents here</span></div></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><div align="right"><strong><em><font class="style23 style13" color="#FF6600"><a href="#" onclick="OpenWindow()">+ view more </a></font></em></strong></div></td>
<td> </td>
</tr>
</table>
</body>
</html>
Can somebody explain me why this isn't working? Code: <SCRIPT TYPE="TEXT/JAVASCRIPT">
// Check lotto
var goed = frmTrekking.EersteGetal.value
var fout = frmGetallen.Opgegeven_1.value
function checkLotto() {
if (frmTrekking.EersteGetal.value == frmGetallen.Opgegeven_1.value) {
document.getElementById('boldStuff').style.color='#00ff00';
document.getElementById('boldStuff').innerHTML = goed;
}
else {
document.getElementById('boldStuff').style.color='#ff0000';
document.getElementById('boldStuff').innerHTML = fout;
}
}
</script>
When I don't use the var, but give for example this: it works ok. Code: document.getElementById('boldStuff').innerHTML = '6';
Hey, for some reason, this isn't working because of the src="images/edit.png" attribute. Here is my code: Code: <a href="#" onclick="change('HEYYY')"><img src="images/edit.png" alt="Edit" id="edit1" /></a>
Javascript (External) Code: function change(message)
{
document.getElementById('edit1').innerHTML = '<input type="text" value="'+message+'" />';
}
It does nothing. But if I take the src attribute out, it works fine. Any help? Thanks. Does anyone have any suggestions as to how I can get IE working properly with this? It's a, (exempting IE), straight forward line numbering and plain text code view function. When using the line numbering portion, it works fine in Moz based browsers etc, as it does in IE for the initial numbering. On trying to remove the numbers though, (on the second call), IE just seems to cascade the list entries rather than removing them. Code: function process_code(id, number, print)
{
if (document.getElementById(id))
{
var current = document.getElementById(id);
var code = current.innerHTML.split('\n');
var count = 0;
var xcount = 0;
if (number)
{
if (current.innerHTML.indexOf('<li class="code-entry">') != -1)
{
code = code.join('\n');
code = code.replace(/\<\/(li\>\<\/ol|li)\>/ig, '\n');
code = code.replace(/\<ol\>\<li[^\>]+\>|\<li[^\>]+\>/ig, '');
current.innerHTML = code.replace(/^\n+|\n+$/g, '');
}
else
{
current.innerHTML = '<ol><li class="code-entry">'+code.join('</li><li class="code-entry">')+'<
/li></ol>';
}
}
else
{
var doc = window.open('', 'code_print');
var newdoc = doc.document;
newdoc.open('text/plain');
newdoc.write(decode_code(code.join('\n')));
newdoc.close();
if (print)
{
if (navigator.userAgent.indexOf('Opera') != -1)
{
window.print();
}
else
{
doc.print();
}
doc.close();
}
}
}
}
How would you make a case statment that creates a button without reloading the page??
Hey everyone, I'm struggling to get this to work, I have a countdown timer with the timer itself declared as, 'out'. This is then set as the content for a div using: Code: document.getElementById(iid).innerHTML=out; My code basically says, if the countdown timer hasn't finished, do the above, if however it has reached the end, set the contents of the div to something else. What I need to do is add an image above the timer which disappears with it when it reaches 0, so essentially, I need to be able to do something like the following (except obviously in the correct syntax, if it exists). Quote: document.getElementById(iid).innerHTML="<img src='images/dateheader.png'><br>" out; Is this possible? Thanks Hello everyone! I'm a student and am trying to write some very simple code. My problem is I use innerHTML in my script file to send some text to a div in my html. When it's sent it renders and then quickly disappears. I've attached my code. Any help is dearly appreciated. There are two separate "files" .html & .js: Code: <?xml version = "1/0" encoding = "utf-8"?>
<!DOCTYPE html Public "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999.xhtm">
<head>
<!-- -->
<!-- CS111 Quiz -->
<title>CS111 Quiz</title>
<script text = "text/javascript" src = "script.js">
</script>
</head>
<body>
<h1 align="center">Mike Overholt</h1>
<br/>
<br/>
<form id="answers" name="answers" onSubmit="return quiz();">
<table width="100%">
<tr>
<td align="center"><h3>1. What is 1+1?</h3></td>
<td align="center"><h3>2. What is 2+2?</h3></td>
<td align="center"><h3>3. What is 3+3?</h3></td>
</tr>
<tr>
<td align="center">
<input type="text" id="1" name="answer1" value=" " align="center"/>
</td>
<td align="center">
<input type="text" id="2" name="answer2" value=" " align="center"/>
</td>
<td align="center">
<input type="text" id="3" name="answer3" value=" " align="center"/>
</td>
</tr>
<tr>
<td align="center">
</td>
<td align="center">
<input type="submit" id="submit" name="submit" value="submit" onClick="quiz();" align="center"/>
</td>
<td align="center">
</td>
</tr>
</table>
</form>
<div id="div1" align="center" name="answer_box" style="border:2px; border-color:gray; border-style:solid; width:50%; margin-left:auto; margin-right:auto; height:200px;">
<p id="p1"></p><br/>
<p id="p2"></p><br/>
<p id="p3"></p>
<!--<script>alert(1);</script>-->
</div>
</body>
</html>
//script.js
//Mike Overholt
//Quiz 1
function quiz()
{
var i=1;
var ans=new Array();
ans[1]=2;
ans[2]=4;
ans[3]=6;
for(i=1;i<ans.length;i++)
{
var a=document.getElementById("p"+i);
if(document.getElementById(i).value==ans[i])
{
a.innerHTML="You answered number "+i+" correctly!";
}
else
{
alert("You answered number "+i+" incorrectly, please try again.");
}
}
}
Hello. I'm trying to change the text on my page dynamically using getElementById etc. Just not quite sure how to do it. Code: <script>
function changeIt() {
document.getElementById('change').innerHTML = '*i want the stuff below here (from 'var' to 'text')*';
}
var Result= ((correct / 5) * 100) + '%';
document.write('<p>Result<b>' + score + '</b></p>');
document.write('<p>some text</p>');
</script>
//
<div id = "change">
*all the info I'm going to replace*
</div>
Just need to know how to put the variables and stuff in the 'innerhtml' part? Thanks. I can't seem to get my innerHTML to display my content. This works fine, if I was to put it all in one line. Code: document.getElementById('addedText').innerHTML = '<table><tr><td>'+"My text goes here"+'</tr></td></table>';
If I was to break it up, which I wanted then nothing seem to show up. Code: document.getElementById('addedText').innerHTML = '<table><tr><td>';
document.getElementById('addedText').innerHTML = "My text goes here";
document.getElementById('addedText').innerHTML = '</tr></td></table>';
Here's my code Code: <html>
<head>
<script type="text/javascript">
function display() {
document.getElementById('addedText').innerHTML = '<table border=1><tr><td>';
document.getElementById('addedText').innerHTML = "My text goes here";
document.getElementById('addedText').innerHTML = '</tr></td></table>';
}
</script>
</head>
<body onload="display()">
<div id="addedText"></div>
</body>
</html>
thanks Hello. I have created a form via innerhtml, like this: content.innerhtml = "<form action =\"customer.php\" method=\"post\">"; content.innerhtml = "<input type = \"text\" name = \"Username\" />"; content.innerhtml = "<input type = \"submit\" value = \"Submit\" />"; When I click submit, instead of running the php file, nothing happens. I tested it outside the script and it works just fine. Is there any other way I can make this work inside the script? Thank you. I trying to display a random number using innerHTML Here's my code: Code: <html>
<head>
<script language="JavaScript">
var myArray = new Array("String1", "String2", "String3", "String4", "String5", "String6", "String7", "String8", "String9", "String10");
var num = Math.floor(myArray.length * Math.random());
document.writeln(myArray[num]);
//document.getElementById("myString").innerHTML = myArray[num];
</script>
</head>
<body>
<div id="myString"></div>
</body>
</html>
it works when I use document.writeln(myArray[num]); but does NOT work for document.getElementById("myString").innerHTML = myArray[num]; any ideas?? tks Hey guys, I'm trying to hide a TR if a TD within it has only specific html in it. Why would this not work: Code: if(document.getElementById('website1').innerHTML.toLowerCase()=="<a href='' title=''></a>")
{
document.getElementById('website-row').style.display='none';
}
Hi there, Ive check the following code in all major browser and it works fine accept ofcourse in IE. Im trying to take the innerHTML from one row and move it to the one above or below depand on the button you are clicking. Does anyone have any idea? Many thanks mkariti <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> TABLE { border-collapse: collapse; } TBODY { border-top: solid black 1px; } TR { border-bottom: solid black 1px; } </style> <script type="text/javascript" language="javascript"> var getId; var row = { selected: -1, hoverColor: '#CCCCCC', defaultColor: '#FFFFFF', onclick: function (trow, id) { getId = id; var r = document.getElementById('row_' + row.selected); if (row.selected != -1 && r) r.bgColor = row.defaultColor; row.selected = id; trow.bgColor = row.hoverColor; }, test: function (num) { var table = document.getElementById("tableId"); var getRowLength = document.getElementById("tableId").rows.length; if (num == 1) { // table.rows[getId].parentNode.insertBefore(table.rows[getId], table.rows[getId - 1]); // getId++; var tempDown = document.getElementById("row_" + getId).innerHTML; document.getElementById("row_" + getId).innerHTML = document.getElementById("row_" + (getId + 1)).innerHTML; document.getElementById("row_" + getId).bgColor = row.defaultColor; document.getElementById("row_" + (getId + 1)).innerHTML = tempDown; document.getElementById("row_" + (getId + 1)).bgColor = row.hoverColor; getId++; } else { // getId--; // table.rows[getId].parentNode.insertBefore(table.rows[getId + 1], table.rows[getId]); var tempUp = document.getElementById("row_" + getId).innerHTML; document.getElementById("row_" + getId).innerHTML = document.getElementById("row_" + (getId - 1)).innerHTML; document.getElementById("row_" + getId).bgColor = row.defaultColor; document.getElementById("row_" + (getId - 1)).innerHTML = tempUp; document.getElementById("row_" + (getId - 1)).bgColor = row.hoverColor; getId--; } } } </script> </head> <body> <div> <table id="tableId"> <tbody> <tr id="row_1" onclick="row.onclick(this,1);"><td><input type="checkbox"></td><td>Row 1</td><td>A</td></tr> <tr id="row_2" onclick="row.onclick(this,2);"><td><input type="checkbox"></td><td>Row 2</td><td>B</td></tr> <tr id="row_3" onclick="row.onclick(this,3);"><td><input type="checkbox"></td><td>Row 3</td><td>C</td></tr> <tr id="row_4" onclick="row.onclick(this,4);"><td><input type="checkbox"></td><td>Row 4</td><td>D</td></tr> <tr id="row_5" onclick="row.onclick(this,5);"><td><input type="checkbox"></td><td>Row 5</td><td>E</td></tr> </tbody> </table> </div> <div> <button id="btn_down" onclick="row.test(1)">Down</button> <button id="btn_up" onclick="row.test(2)">Up</button> </div> </body> </html> Ok I want to be able to include a html file into my template. I want the php include to work when I press a button that will put the include into a specific element with the document.getElementById("").innerHTML method in javascript. I want the include to be able to be more then a single line. For example I want to be able to write my code like this <div> some text </div> and not have to write it like this <div>some test</div> Thanks Shelby Hello all. I'm new here and new to JavaScript. Ive got a snippet of code that's not working. Can you guys help me out? The code is the following: Code: function image()
{
var image = document.getElementById('add_image');
image.style.height = '30px';
image.innerHTML = '<div style="margin:5px; width:520px; height:20px;" id="add_images"><input type="file" name="pic" /></div>';
}
The first half of the function is working, but the second half isn't. I originally tried style.visibility = 'visible' but that didn't work so I try innerHTML. Since that didn't work either, I've decided to seek help. Thanks ahead of time. Hello everyone, My problem consist in that I want to avoid re-loading the whole page, and only re-load the portion of the website that needs to be. Similar to listed below; website Banner (Solid) Menu bar (Solid) Div content (Changeable) The main problem is that no matter what I do, I can't make the innerHTML cover the whole <div> </div> It remains the same very small size, no matter what I put within the div. Far from its full size potential (plenty of space left). Head script Code: PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <script type="text/javascript"> //<![CDATA[ // written by: Coothead function updateObjectIframe(which){ document.getElementById('one').innerHTML = '<'+'object id="foo" name="foo" type="text/html" data="'+which.href+'"><\/object>'; } //]]> </script> <link rel="stylesheet" type="text/css" href="main_stylesheet.css" media="screen, projection" /> </head> Here is the html portion. PHP Code: <div id="one" style="background-color:#C0C0C0;position:relative;height:2000px;width:800px;float:left;"></div> Here is the link placed elswhere on the website (The solid menu bar) PHP Code: <li><a href="http://www.google.com" onclick="updateObjectIframe(this); return false;">Forums</a></li> It's not Google that I want to use, however a PHPBB forum. But I found that the same problem occurs on no matter what I put in this innerhtml, the javascript gets limited to the same little box in the upper left corner of my div. Can't change size, no matter what I tried to do. I'm suspecting it has something to do with CSS, however I spended a whole night (and now day) trying to work this out, I really don't get much further. I realize I should spend a couple of more nights when new to JS, however this kind script I consider like a foundation to a house, it's important before moving on with learning, maybe I'm wrong though. Anyone who can help with this issue? Would be very much appreciated, Thank you! Hi. I've created a test page with loads of comments on the source, as this is quite hard to explain. phurley.co.uk/test.php - (if you select 'specific date', this is the one i'm trying to get working for now) Basically, I have a text box that when selected makes a calendar pop up. This works fine, but I am now making the html for the text box be produced via innerHTML in a JS function (with select boxes and a case/break), and the pop up no longer works. I've tried all night to get this working but my JS skills are letting me down. If you could take the time to have a look at the source code it would be very very much appreciated. thank you I'm working on a script that inserts things into tables. It's complicated and involves xmlhttp and lots of stuff, but I've narrowed the problem down to something simple. The following code does not work in IE. It doesn't generate an error, but simply displays nothing. Here is the code: Code: <body>
<table id="test">
</table>
<script type="text/javascript">
document.getElementById('test').innerHTML = '<tr><td>test<\/td><\/tr>';
</script>
</body>
I have no idea why it isn't working as it works in Safari and Firefox. Help is much appreciated. Julian |
|||||||