Adding HTML to page based on conditional logic in JavaScript or jQuery

Question

I have a div in which I have to fill some data in. I have to render the HTML based on conditions and I am adding data to that div using jQuery. Can someone please tell me how I can add the condition based insertion of HTML on the page?

      function AddData()
    {   
        var data = "<div><h1>My data</h1>"
             if(jsVariable){
                  <p>The JSVariable is present on page </p>                
                        }
               +"</div>"
            $('.myDiv').after("<br/>"+data);
    }

What exactly are you trying to do? If you simply want to add some extra html content depending on the variable, you are almost done. You just need to add the part to the data (data += "..."). — weeknie
– weeknie, Commented Mar 30, 2014 at 22:13
I have a lot of HTML to add based on certain conditions like if the data is present or not .I used if(jsvariable) example to simplify my case — user505210
– user505210, Commented Mar 30, 2014 at 22:18

Idrizi.A · Accepted Answer · 2014-03-30 22:21:34Z

2

  function AddData()
    {   
        var data = "<div><h1>My data</h1>"
             if(jsVariable){
                  data = data + "<p>The JSVariable is present on page </p>"     
              }
             data = data + "</div>"
            $('.myDiv').append("<br/>"+data);
    }

edited Mar 30, 2014 at 22:21

Idrizi.A

12.3k16 gold badges52 silver badges92 bronze badges

answered Mar 30, 2014 at 22:20

user2127434

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

Comments

andrew · Accepted Answer · 2014-03-30 22:18:08Z

1

  function AddData(){   
    if(typeOf(jsVariable)!=="undefined"){ 
      var data =  "<div><h1>My data</h1>";
          data += "  <p>The JSVariable is present on page </p>";                
          data += "</div>";
       $('.myDiv').after("<br/>"+data);     
      }
}

this should do the trick, but some element with a class of myDiv will need to already exist for this to work

 <div class="myDiv"></div>

answered Mar 30, 2014 at 22:18

andrew

9,6039 gold badges36 silver badges62 bronze badges

1 Comment

user505210 Over a year ago

Thanks all..Really appreciate so quick responses.

halfer · Accepted Answer · 2014-03-30 22:21:06Z

0

What exactly are you trying to do?

If you simply want to add some extra html content depending on the variable, you are almost done. You just need to add the  part to the data (data += "...").

If you're trying to add all of the html based on the variable, put the if statement around the $(".myDiv").after (which should be $(".myDiv").append btw).

edited Mar 30, 2014 at 22:21

halfer

20.2k20 gold badges111 silver badges208 bronze badges

answered Mar 30, 2014 at 22:15

weeknie

1708 bronze badges

Comments

Idrizi.A · Accepted Answer · 2014-03-30 22:21:50Z

0

You'r code is not valid.

Could you explain what do you want to do with

if(jsVariable){
    <p>The JSVariable is present on page </p>                
}
+"</div>"

If you want to add a html code at ending of a div, you should use

$('.myDiv').append('<p>Text text text text</p>');

edited Mar 30, 2014 at 22:21

Idrizi.A

12.3k16 gold badges52 silver badges92 bronze badges

answered Mar 30, 2014 at 22:13

Elias Soares

10.4k4 gold badges36 silver badges62 bronze badges

Comments

spiderman · Accepted Answer · 2014-03-30 22:25:29Z

0

simple usage:

<!DOCTYPE html>
<html>
<head>
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

</script>
<script>
    $(document).ready(function() {
        $("p").click(function() {
            var a = $("#div1").text();
            if (a == "one") {
                $("#div2").text(a);
            }
        });
    });
</script>
</head>
<body>
    <div id="div1">one</div>
    <div id="div2"></div>
    <p>click me</p>
</body>
</html>

answered Mar 30, 2014 at 22:25

spiderman

11.1k13 gold badges57 silver badges87 bronze badges

Comments

Bilal · Accepted Answer · 2014-03-30 22:26:02Z

0

function addData(to)
{
    var h1   = $('<h1>').text('My Data');
    var data = $('<div>').append(h1);

    if (window.jsVariable) {
        $('<p>').text('JS Variable is present on the page').appendTo(data);
    }

    to.append(data);
}

addData( $('.myDiv') );

answered Mar 30, 2014 at 22:26

Bilal

4291 gold badge3 silver badges11 bronze badges

Comments

Joel · Accepted Answer · 2014-03-30 22:30:44Z

0

if (condition) {
   $('div#yourDivID').html('<p>The JSVariable is present on page </p>');
}

In addition to .html(which places the html inside your div), you can use other things like append, prepend etc. Check out jQuery's documentation on DOM Insertion.

edited Mar 30, 2014 at 22:30

answered Mar 30, 2014 at 22:24

Joel

6852 gold badges9 silver badges23 bronze badges

Comments

Mathias Bak · Accepted Answer · 2014-03-30 22:35:50Z

0

Here is a JSFiddle http://jsfiddle.net/va4n8/

function addData() {
    var newDiv = $('<div>');
    newDiv.append($('<h1>').html('My data'));

    if ('jsVariable' in window) {
        newDiv.append($('<p>').html('The JSVariable is present on page'));
    }

    $('.mydiv').after($('<br>')).after(newDiv);
}

answered Mar 30, 2014 at 22:35

Mathias Bak

5,2556 gold badges34 silver badges42 bronze badges

Collectives™ on Stack Overflow

Adding HTML to page based on conditional logic in JavaScript or jQuery

8 Answers 8

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related