HTML into Javascript

Question

I currently have this code:

if(pageStatus === 'online'){
        //html here?

What I would like to do is: if page status is online, some HTML code will go inside, I would like to add a button (I have the CSS, it's just putting it in there). How can this be done? I thought I could break out the JS but I know that won't work.

//in regards to it saying this has already been answered, I have looked at the other topics and have no idea, people here are helping me for my issue directly, the topic is a little different to what I want it to do.

Read https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction — Gabriele Petrioli, Jun 07 '18 at 15:11
If you want to do what I think you want to do, you'll need to create the element in JS and append it to the HTML element you want it to appear inside. — Dark Hippo, Jun 07 '18 at 15:11
@Christian4423 If you have an answer, post it. It's frowned upon to ask users to PM you. — j08691, Jun 07 '18 at 15:12
Perhaps https://plainjs.com/javascript/manipulation/ is easier to grok — Gabriele Petrioli, Jun 07 '18 at 15:13
Possible duplicate of [Adding div element to body or document in JavaScript](https://stackoverflow.com/questions/15741006/adding-div-element-to-body-or-document-in-javascript) — Olga, Jun 07 '18 at 15:26

Ashish Ranjan · Answer 1 · 2018-06-07T15:28:30.537

-1

Since we don't know where you want to add, let's add to the body of the document. You can add to any specific location by doing something like: parentElement = document.getElementById("someId") , etc and the create a button as I have shown and add append it to the parentElement

var pageStatus = "online"
if(pageStatus === 'online'){ 

    body = document.getElementsByTagName('body')[0];
    // gets the body of the document/
    // you can get any specific element as the parent element similary...
    button = document.createElement('button')
    // creates a button
    button.innerHTML = "Click Me!"
    // sets the text you weant to dispaly on the button
     button.setAttribute("onclick","location.href = 'https://stackoverflow.com/users/9335017/tom'" );
    body.appendChild(button)

}

edited Jun 07 '18 at 15:28

answered Jun 07 '18 at 15:16

Ashish Ranjan

12,760
5
27
51

Where is the link where the button directs? I need it to be an ahref – Tom Jun 07 '18 at 15:23
@Tom: ?? Are you not able to get redirected to another loaction on the ``button` click after you `Run code snippet`? – Ashish Ranjan Jun 07 '18 at 15:34
Hmmm, I can see Click me in there – Tom Jun 07 '18 at 15:42

Axel · Accepted Answer · 2018-06-08T03:12:38.500

-1

First, you need to hard-code an element (div) where you want to insert a code.

Now, you need to visualize the position names. Here how it works:

<!-- beforebegin -->
<div>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</div>
<!-- afterend -->

Now, you can insert the code relative to the div element. Here's a quick example:

// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>

Security Considerations

When inserting HTML into a page by using insertAdjacentHTML be careful not to >use user input that hasn't been escaped.

It is recommended you not use insertAdjacentHTML when inserting plain text; >instead, use the node.textContent property or node.insertAdjacentText() method. >This doesn't interpret the passed content as HTML, but instead inserts it as >raw text.

Traditional Method

Simply, select a div and use innerHTML property. Here's a quick example:

  if(pageStatus === 'online'){
    document.getElementById('insertHere').innerHTML = '<p>Server is online</p>';
  }

Putting it all together:

var pageStatus = 'online';

if(pageStatus === 'online') {
 document.getElementById('test').innerHTML = "<a href=\"http://www.example.com\">Goto Website</a>";
  // Since, HTML attribute doesn't support single quotes, '\' is used to escape the double quotes.
} else {
 document.getElementById('test').innerText = 'You can\'t proceed because page is currently offline';
}

<div id="test"></div>

Learn more about escaping the characters: What does it mean to escape a string?

edited Jun 08 '18 at 03:12

answered Jun 07 '18 at 15:21

Axel

4,365
11
63
122

Ok, so where you say select a div, I am confused there. Sorry I am new to JavaScript aha – Tom Jun 07 '18 at 15:26
@Tom It's called [DOM](https://www.w3schools.com/js/js_htmldom.asp)! You can pick an element from your raw HTML code and handle it with Javascript. For example: let's say you have a paragraph. You give id to that element by adding a attribute `id` or `class` to the element `
`! And then you select that element using Javascript: `document.getElementById('para')` or `document.getElementsByClassName('paragraph')[0]`. `[0]` means select the first element because one class can be used multiple times in different elements. – Axel Jun 07 '18 at 15:38
I put this `Google` then `document.getElementById('href').innerHTML = 'Google';` but the `ahref` in raw HTML is always showing. – Tom Jun 07 '18 at 15:42
Where do you want to insert the HTML code? As per your comment, I am seeing that you want to insert HTML inside of `ahref`! – Axel Jun 07 '18 at 15:54
I would like it so, if the page is online, it will output a href link. Hope this helps :) – Tom Jun 07 '18 at 16:07
thanks so much! That worked, however, when I tried to put my own code in, it broke, where you have `Goto Website` I have put `` - any idea? – Tom Jun 08 '18 at 12:38
@Tom You forgot to close the `a` tag! Try this: `"Link"` – Axel Jun 09 '18 at 05:04

Chris · Answer 3 · 2018-06-07T15:29:56.010

-1

You could just have a css class like the following:

.display-none {
    display: none;
}

Then add this to the html you want to initially hide, or toggle using an if/else.

<div id="online-toggle"></div>

Then in your JavaScript you can do something simple like:

if (pageStatus === 'online') {
    document.getElementById("online-toggle").classList.remove("display-none");
} else {
    document.getElementById("online-toggle").classList.add("display-none");
}

or in older browsers:

if (pageStatus === 'online') {
    var regex = new RegExp('(\\s|^)display-none(\\s|$)');
    el.className = el.className.replace(regex, '');
}

Alternatively you can build the html manually in JavaScript using something like:

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

Or use some form of Ajax call that returns a template or view that you can embed in the desired location.

edited Jun 07 '18 at 15:29

answered Jun 07 '18 at 15:23

Chris

170
1
12

This would not work for me, as the actually thing is being loaded by javascript already. – Tom Jun 07 '18 at 15:25
@Tom You could do the opposite and add the CSS class on the else, but if not Sanjay's response using innerHtml would probably be your best option then, good luck. – Chris Jun 07 '18 at 15:27
Thanks @Chris - I am just confused on how to "select a div" and that part of it all. – Tom Jun 07 '18 at 15:29

Dale · Answer 4 · 2018-06-07T15:17:51.710

-3

So it isn't very good practice but you can use

document.write("some html")

some html before js
 
<script>
var a =1;

if(a==1)
{

document.write("<button>button 1</button>");
}

if(a==2)
{

document.write("<button>button 2</button>");
}

</script>

some html after JS

edited Jun 07 '18 at 15:17

answered Jun 07 '18 at 15:15

Dale

1,911
11
18

Document.write will replace all existing html – Christian4423 Jun 07 '18 at 15:17
1

It is a BAD practice, suggesting stuff like this to a newbie is like killing a kitten. – Olga Jun 07 '18 at 15:22

HTML into Javascript

4 Answers4

Security Considerations