reccommended way to output HTML from JavaScript

Question

I know this has probably been asked before, but here goes: I have a web application that needs to generate modal dialogs. alert, confirm, and prompt are too simple and ugly, and that modal window function...it's a long story. I can't use it. So, I'm going to create the modal box using DOM functions and CSS. However, I need to put quite a lot of content into the dialog, and I'm wondering what the best way to do this is. Putting the HTML into a string and using innerHTML is unwieldy. I could use the DOM, but that's annoying and takes too much time to code. I know I can use a script with a weird type tag (something like x-random/x-htmlstuff) and then copy it's content to the innerHTML, but is there a better, more "official" way to do this?

Are you generating the HTML dynamically? If not, you can just put it into your original HTML, with display: none. Then change it to display: block when you want to show the dialog. — Barmar
– Barmar, Commented Dec 24, 2013 at 23:14
Better to use '' (empty string) rather than 'block' so that displayed elements adopt their default or inherited style (which might be 'block', but might also be 'inline-block', etc.). — RobG
– RobG, Commented Dec 25, 2013 at 2:46

Barmar · Accepted Answer · 2013-12-24 23:16:51Z

4

if the layout of the modals are static, just put them into the HTML of the page. Use CSS to set them to display: none when the page is displayed normally. When you want to display the model, use

document.getElementById('modal-id').style.display = 'block';

answered Dec 24, 2013 at 23:16

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Vince Over a year ago

An improvement on this would be to use jQuery<3: $('#modal-id').show() //.hide() to hide the modal

Barmar Over a year ago

The question didn't say jQuery, so I didn't assume it in the answer.

Vince Over a year ago

It's just a suggestion ;)

Barmar Over a year ago

I personally prefer jQuery, but if the question doesn't ask for jQuery I only suggest it when the raw JS solution would be overly complex. Other answers already suggested jQuery and the OP said they weren't acceptable.

RobG Over a year ago

Better to use ...style.display = ''; so elements adopt their default or cascade style.

TastySpaceApple · Accepted Answer · 2013-12-24 23:23:06Z

1

I've heard that some people use this solution:

<script type="text/html" id="popup_html">
 html...
</script>

(of course, you should make it invisible)

But, most likely, if you're trying to write a lot of HTML from javascript, then you should retrace and think if there's a better way.

If you're using the same div multiple times, you should just create it in the HTML page, and display it when needed
if you're creating a new element - see if you can use the document.createElement and appendChild methods (assuming there aren't many nodes involved)
if neither apply - retrace. For large projects, maybe object-oriented javascript can help.

answered Dec 24, 2013 at 23:23

TastySpaceApple

3,2051 gold badge22 silver badges27 bronze badges

1 Comment

markasoftware Over a year ago

I'll upvote it, but I already explained I know about this in the question, so there's nothing new to me here

David · Accepted Answer · 2013-12-24 23:15:37Z

0

There's no magical way that I'm aware of. I usually just use innerHTML and write the HTML out in a well formatting from such as:

box.innerHTML = "<div id='boxChild'>\n" +
                "    <p>Put whatever content here</p>\n" +
                "</div>";

The \n make it so if you view your code, it will be well formatted, and no one long string once the JS writes it.

answered Dec 24, 2013 at 23:15

David

4,8815 gold badges37 silver badges76 bronze badges

2 Comments

markasoftware Over a year ago

interesting. Not the easiest thing ever, so I'm not going to accept it. I said in the question I didn't want to just do this

David Over a year ago

Fair enough. Sometimes you don't have a choice if your content is dynamic, or it's the easiest way. But it seems like you're not dynamically generating the messages, so the solution you chose is definitely the best.

António Almeida · Accepted Answer · 2013-12-24 23:18:14Z

0

A way to do this, is to generate the popups within the html and show or hide them when you need, like this:

<div class="myPopup">
    <div class="pop-message msg-01">This a pre generated alert with the id: <span class="dynamic-field-01"></span></div>
    <div class="pop-message msg-02">This another pre generated alert with the id: <span class="dynamic-field-02"></span></div>
    <div class="pop-message msg-03">...</div>
</div>

.pop-message {
    display: none;
}

Now while user navigates the page, you are going to hide and show the .pop-message's while replacing those .dynamic-field's if needed.

answered Dec 24, 2013 at 23:18

António Almeida

10.2k8 gold badges62 silver badges72 bronze badges

Comments

Igor Raush · Accepted Answer · 2013-12-24 23:19:24Z

0

I would suggest having the HTML for your modal content in separate files, and then loading it asynchronously when you need it to popup the modal.

partials/modal.html

<div class="content">My modal content</div>

main.js

var modalContent = null;

function _fillModal() {
    modal.innerHTML = modalContent;  // something like this
}

function openModal() {
    if (!modalContent) {
        // XMLHttpRequest, which populates the modalContent variable
        // and in the callback, calls _fillModal()
    }

    // If already filled, just call
    _fillModal()
}

If you want the content to be dynamic, make modal.html a template, and use a JS template library (for example http://underscorejs.org/#template), or write a simple RegExp replace yourself.

answered Dec 24, 2013 at 23:19

Igor Raush

15.3k1 gold badge38 silver badges58 bronze badges

2 Comments

markasoftware Over a year ago

interesting idea, but I don't want the user to have to wait for a request to complete, delaying the modal

Igor Raush Over a year ago

In that case, you can perform the AJAX request when the page loads, and by the time the modal needs to open, the content (or template) will be available.

scrblnrd3 · Accepted Answer · 2013-12-24 23:22:27Z

0

I'd suggest loading it with innerHTML or using jQuery to simplify things, but if you need a modal window, could you use the jQuery UI modal dialog, shown here?

If you have the content loaded in divs in your HTML, and have them have css display:none;, and then show them with

document.getElementById("unshown-div").style.display="block";

If you can use jQuery, a modal box could be done with

<div id="modal" style="display:hidden">
    Here is a modal dialog bbox
</div>

and your script:

$("#dialog").dialog();

Whatever you do, just don't use document.write()

edited Dec 24, 2013 at 23:22

answered Dec 24, 2013 at 23:16

scrblnrd3

7,4349 gold badges36 silver badges65 bronze badges

2 Comments

markasoftware Over a year ago

sorry, I'm not using jQuery

scrblnrd3 Over a year ago

@Markasoftware ok I added a couple of non-jQuery solutions

Collectives™ on Stack Overflow

reccommended way to output HTML from JavaScript

6 Answers 6

5 Comments

1 Comment

2 Comments

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

1 Comment

2 Comments

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related