从外部JavaScript文件添加HTML

Question

I am new to javascript so please don't burn.

I have a file Index.html which i cannot change, even a bit.

Index.html calls a javascript file experiment.js. What i want to do is add my html code and call a css file style.css using javascript in experiment.js.

this is the code i am writing in experiment.js

    var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', 'style.css');
document.getElementsByTagName('head')[0].appendChild(link);

var htmlcode;
htmlcode="";
htmlcode="<div class="transbox1"> </div> <p id="heading">OHMs LAW EXPERIMENT</p>";
htmlcode=htmlcode+"<div class="transbox2"></div>";
htmlcode=htmlcode+"<p id="ohmlaw">Ohms Law states that Voltage across any resistan;e is Proportional to Current Flowing through the circuit.<br>V=IR (V=Voltage(Volt) I=Current(Ampere) R=Resistance(Ohm))</p>";
htmlcode=htmlcode+"<div id="abbr"><img src="abbr.jpg" height="200" width="150"/> </div>";
htmlcode=htmlcode+"<div id="img1" ><img id="loadingImage" src="graph.jpg" style="visibility:hidden"height="280" width="380"/></div>";
htmlcode=htmlcode+"<div id="circuit" ><img src="circuit.png" height="660" width="1130"/></div>";
htmlcode=htmlcode+"<div id="battery" ><img id="cells" src="reverse.png" style="visibility:hidden" height="180" width="270"/></div>";
htmlcode=htmlcode+"<table id="myTable">";
htmlcode=htmlcode+"<tr>";
htmlcode=htmlcode+"<th>Voltage</th>";
htmlcode=htmlcode+"<th>Current</th>";
htmlcode=htmlcode+"<th>Voltage/Current</th>";
htmlcode=htmlcode+"</tr>";
htmlcode=htmlcode+"</table>";
htmlcode=htmlcode+"<button  id="startQuiz" class="button" onclick="startQuiz()">Start Quiz</button>";
htmlcode=htmlcode+"<button  id="next" class="button" onclick="nextQuiz()">Next</button>";
htmlcode=htmlcode+"<button  id="submit" class="button" onclick="checkQuiz()">Submit answer</button>";
htmlcode=htmlcode+"<button  id="showQuiz" class="button" onclick="showQuiz()" >Show Answers</button>";
htmlcode=htmlcode+"<button  id="graph" class="button" onclick="showGraph()">Graph</button>";
htmlcode=htmlcode+"<button  id="note" class="button" onclick="note()">Note Values</button>";
htmlcode=htmlcode+"<button  id="reverse" onclick="reverseP()">Reverse Polarity</button>";
htmlcode=htmlcode+"<input type="checkbox" id="reverseCheck">"    
document.write(htmlcode);

This seems to be not working. Please help.

Answer 1

You have a problem because you don't escape double quotes :

htmlcode = "<div class=\"transbox1\"> </div> <p id=\"heading\">OHMs LAW EXPERIMENT</p>";

You should consider using simple quotes for your string so you wouldn't have to escape the double quotes :

htmlcode = '<div class="transbox1"></div><p id="heading">OHMs LAW EXPERIMENT</p>';

Other advice, you should use the "+=" notation

htmlcode = '<div class="transbox1"></div>';
htmlcode += '<div class="transbox2"></div>';