CODEWITHSUNDEEP
javascripthtmlcssif-statement
Freedom
Freedom

Reputation: 347

Inserting HTML in JavaScript in HTML

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>

Upvotes: 0

Views: 145

Answers (4)

cssyphus
cssyphus

Reputation: 40068

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)

Upvotes: 2

Arif Burhan
Arif Burhan

Reputation: 505

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.

Upvotes: 1

Zenuncl
Zenuncl

Reputation: 188

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

Upvotes: 1

KpTheConstructor
KpTheConstructor

Reputation: 3291

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

  1. 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

  2. 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/

  3. 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 .

Upvotes: 1

Related Questions