Inserting HTML in JavaScript in HTML

Question

I am fairly new to programming, especially HTML/CSS and JavaScript, so I'm sorry if my explanation is not that great.

I'm using ionic just for a template to set it up. My question is, the document is a .html file, and I added in <script> so I could insert Javascript in. Specifically, I'm trying to add an if-else statement in there. However, I also need to add html code inside of the if statement--I need to add {{question.a1right}} which calls from a fieldbook spreadsheet (Here's the link: https://api.fieldbook.com/v1/56be4f73bf3e5b030029d62a/quiz_app_q_a/1) so that I can see if it is a "Y" or a "N" value to perform a certain action.

How do I insert HTML in JavaScript inside of a HTML document? Thanks and please explain concepts simply so I can understand :)

<html>

<body>
    <ion-view>
        <ion-nav-title>Text</ion-nav-title>
        <ion-content overflow-scroll="true" padding="true" class="has-header">
            <div>
                <button class="button button-full button-energized">

                    <script type="text/javascript">
                        <script type="text/html">



                    </script>


                    </script>


                </button>
            </div>
        </ion-content>
    </ion-view>

</body>

</html>

By the way, I just found < script > on the web, so I'm not all too familiar with it. Sorry! — Freedom, Mar 18 '16 at 21:20
Only one script tag is needed: the outer one. The home one does not make sense, for adding him to the page use dom manipulation — Anton Harald, Mar 18 '16 at 21:22
Note that at top of my answer, I linked [this post](http://stackoverflow.com/questions/19986159/how-to-allow-users-to-edit-content-of-webpage-and-save-it-for-all-viewers#answer-19986771) that explains why use jQuery rather than pure js, and gives a brief code comparison at bottom of post. — cssyphus, Mar 18 '16 at 21:34

score 2 · Accepted Answer · edited May 23 '17 at 12:08

As a beginner, I first suggest you use jQuery rather than pure javascript. For one thing, it's much less typing and (imho) far easier to master. You code in jQuery, and behind the scenes jQuery turns that into javascript at runtime. To use jQuery, all you must do is include the jQuery library in the <head> tags of each page, like this:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

Javascript (jQuery) that allows you to inject HTML onto the page looks like this:

$('#myButt').click(function(){
 $('body').append('<div id="injectedDIV">This added in</div>');
});

#injectedDIV{width:100%;padding:20px;background:wheat;color:orange;text-align:center;font-size:2rem;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<ion-view>
<ion-nav-title>Text</ion-nav-title>
<ion-content overflow-scroll="true" padding="true" class="has-header">
 <div>
  <button id="myButt" class="button button-full button-energized">Click Me</button>
 </div>
</ion-content>
</ion-view>

The full sample page would look like this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#myButt').click(function(){
                $('body').append('<div id="injectedDIV">This added in</div>');
            });
        });
    </script>
    <style>
        #injectedDIV{width:100%;padding:20px;background:wheat;color:orange;text-align:center;font-size:2rem;}
    </style>

</head>


<html>
<body>
    <ion-view>
        <ion-nav-title>Text</ion-nav-title>
        <ion-content overflow-scroll="true" padding="true" class="has-header">
            <div>
                <button id="myButt" class="button button-full button-energized">Click Me</button>
            </div>
        </ion-content>
    </ion-view>
</body>
</html>

Since you are new to jQuery, here are some free beginner-level tutorials to get you started. (It's where I learned myself, and they're free)

Thanks a bunch for the help. – Freedom Mar 18 '16 at 21:39 — Freedom, Mar 18 '16 at 21:39

score 1 · Answer 2 · answered Mar 18 '16 at 21:23

1

Its gonna take a few steps to accomplish this . Follow the list:

First you will need to make an api call using ajax to get data from https://api.fieldbook.com/v1/56be4f73bf3e5b030029d62a/quiz_app_q_a/1
This data will be returned as an json abject and will need to be stored in a variable . since you are a beginner you should follow this link : http://www.w3schools.com/ajax/
Now you will be able to access this object follow this link : http://www.w3schools.com/js/js_json.asp

Hope this helps a little .

answered Mar 18 '16 at 21:23

KpTheConstructor

3,153
1
14
22

Thanks for the help :) – Freedom Mar 18 '16 at 21:38
Could you go through this step by step sort of and explain how I make an api call using ajax, then store the data in a variable? – Freedom Mar 18 '16 at 21:47

score 1 · Answer 3 · answered Mar 18 '16 at 21:25

I don't clearly understanding what you are trying to ask. I assume it is about HTML in JavaScript.

Yes, you can use <script></script> tag within a HTML code/file for JavaScript. If you are going to need add HTML code in JS, you can do as following

document.getElementById('mydivtag').innerHTML = "<li><a href=\"someLink\">Some Link</a></li> ";

Within the quotation (after EQUAL sign), there is where you put your HTML code. Outside of JS, you need a <div id="mydivtag"></div> and put it into where you need to display the HTML

score 1 · Answer 4 · answered Mar 18 '16 at 21:27

Javascript can output html in the following way, use document.write:

document.write("<h2> hello </h2>");

Will output hello within h2 tags.

This will occur when the web page is loaded.

Javascript can alter html on an existing page by using functions like appendnode or addchild, usually following an action like a button click.

Inserting HTML in JavaScript in HTML

4 Answers4