Adding several lines of HTML to page using Javascript

Question

I have an HTML page that displays some information. In javascript, I have a var submitted, that as you can see below, will add a line of text to my HTML if it meets a certain condition.

<script type="text/javascript">
if (submitted == "yes") {       
    document.write("<div>SHOW ONLY IF SUBMIITED</div>");
}
</script>

Thing is, I want to add several lines of HTML code to my page and I've come to understand that document.write is not the appropriate method to do this. However, every alternative I've found doesn't seem to work for me.

Here's a snippet of the HTML I want to add:

<form>
<table>
    <tr>
        <td>Surname</td>
        <td>Given name</td>
    </tr>
    <tr>
         <td><input type="text" name="ln" value=""/></td>
         <td><input type="text" name="gn" /></td>
    </tr>
</table>
</form>

The full code is much longer.

My page:

<script type="text/javascript">
if (submitted == "yes") {       
    document.write("<div>SHOW ONLY IF SUBMIITED</div>");
}
</script>
<body>
<div class="Title" style="display:block; width=100%;">
    <h1>FORM TITLE</h1>
</div>
     <div id="injecthere"></div>

..... the rest of my html code
</body>

The code needs to be injected on page load, not by any input from the user (no buttons, etc)

How can I add my code to my HTML page WITHOUT jQuery (basic java only pls)?

`I've come to understand that document.write is not the appropriate method to do this` -- *Why have you come to understand that?* — Robert Harvey, Feb 03 '19 at 20:08
Could you not just do `document.write` multiple times? Or inside the `document.write`, have multiple lines of code? — Aniket G, Feb 03 '19 at 20:10
What if you just included the div on the page and then change its visibility conditionally? https://stackoverflow.com/a/3961649/102937 — Robert Harvey, Feb 03 '19 at 20:10
This is why: https://stackoverflow.com/questions/4537963/what-are-alternatives-to-document-write — Sweepster, Feb 03 '19 at 20:12
If you'd read through that question/answers you will have noted all the other options you can use. Are neither `innerHTML` or `insertAdjacentHTML` working? — Andy, Feb 03 '19 at 20:20

ellipsis · Accepted Answer · 2019-02-03T20:41:51.877

2

You can use .innerHTML property of the element

var submitted="yes"
var code=`<form>
<table>
<tr>
<td>Surname</td>
<td>Given name</td>
</tr>
<tr>
<td><input type="text" name="ln" value=""/></td>
<td><input type="text" name="gn" /></td>
</tr>
</table>
</form>`;
if (submitted == "yes") {       
    document.querySelector("body").innerHTML+=code
}

<body></body>

edited Feb 03 '19 at 20:41

answered Feb 03 '19 at 20:14

ellipsis

12,049
2
17
33

this gives me an error: Uncaught TypeError: Cannot set property 'innerHTML' of null – Sweepster Feb 03 '19 at 20:22
can you show what html element you are appending to – ellipsis Feb 03 '19 at 20:23
It does! How would I then format this to make it readable as I have several lines of code that i would rather not compress into a single line? – Sweepster Feb 03 '19 at 20:37

Cat · Answer 2 · 2019-02-03T21:32:46.790

Here' a way to do it that employs javascript's "template literal" syntax -- using backticks (`) -- to enclose your markup.

function addStuff(){
  const formHTML = `
    <table>
      <tr>
        <td>Surname</td>
        <td>Given name</td>
      </tr>
      <tr>
        <td><input type="text" name="ln" value=""/></td>
        <td><input type="text" name="gn" /></td>
      </tr>
    </table>`;
  const newForm = document.createElement("form");
  newForm.innerHTML = formHTML;
  document.querySelector("body").appendChild(newForm);
}

#existing-content { 
  height: 50px; 
  width: 400px; 
  margin: 10px;
  padding: 10px;
  border: 1px solid gray;
}

<button onclick="addStuff()">Append HTML to Page</button>
<div id="existing-content">Existing content</div>

If you want to support browsers that don't support template literals, you might end up using tedious iterations of createElement (and/or createTextNode) with appendChild to add each node to the DOM one at a time, starting with the most deeply nested element and working your way out.

If for some reason your page doesn't have a body element, this would work to find what element to append the new markup to:
document.querySelector("#existingContent").parentNode.appendChild(newForm);

score 0 · Answer 3 · edited Feb 03 '19 at 22:06

0

You have the js property innerHTML. So it will look like:

<script type="text/javascript">
  if (submitted == "yes") {       
    document.getElementByID("myDivID").innerHTML = '<form><table><tr><td>Surname</td><td>Given name</td></tr><tr><td><input type="text" name="ln" value=""/></td><td><input type="text" name="gn" /></td></tr></table></form>';
  }
</script>
<div id="myDivID"></div>

edited Feb 03 '19 at 22:06

Jonas Praem

2,296
5
32
53

answered Feb 03 '19 at 20:16

Horion Raphael

26
4

This gives me an error; document.getElementByID is not a function – Sweepster Feb 03 '19 at 20:20

score 0 · Answer 4 · answered Feb 03 '19 at 20:19

Basically what you want to do is designate a DOM element that you can inject the dynamically built HTML into - you do that by setting or appending to it's innerHTML property:

const buttonEl = document.querySelector('#htmlBtn');
const targetEl = document.querySelector('#target');
let divId = 0;
buttonEl.addEventListener('click', (e) => {
  //innerHTML is what you want to use instead of document.write
  targetEl.innerHTML += `<div id=dynamic-html-${divId}>Added HTML  ${divId}</div>`;
  divId += 1;
});

<input id="htmlBtn" type="button" value="Add some HTML to the DOM" />
<div id="target"></div>

Istvan Szabo · Answer 5 · 2019-02-03T21:09:51.613

-1

var submitted = "yes";

function showFormIfNeeded() {
  if (submitted === "yes") {
    var form = document.getElementById("myForm");
    form.style.display = "block";
  }
}

#myForm {
  display: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
</head>
<body onload="showFormIfNeeded()">
  <form id="myForm">
    <table>
      <tr>
        <td>Surname</td>
        <td>Given name</td>
      </tr>
      <tr>
        <td><input type="text" name="ln" value="" /></td>
        <td><input type="text" name="gn" /></td>
      </tr>
    </table>
  </form>
</body>
</html>

Try this

edited Feb 03 '19 at 21:09

answered Feb 03 '19 at 20:25

Istvan Szabo

13
1
4

1

This doesn't really solve my problem. I don't want that button to show unless submitted = yes and that brings me right back to the same problem I have in the first place, I can't use document.write to inject html code, only text. – Sweepster Feb 03 '19 at 20:31
And when do you want to check that submitted == "yes" ? On page load? – Istvan Szabo Feb 03 '19 at 20:40
thast right, its a variable obtained by the url through POST – Sweepster Feb 03 '19 at 20:58

Adding several lines of HTML to page using Javascript

5 Answers5