javascript html tag not adding content

Question

I am attempting to append content to a div as a table

<div id="viewcontent"></div>
<script>
$('#viewcontent').html = $('#viewcontent').html + "<table bgcolor='#CCCCFF' bordercolor='#000000' align='center' width='600' border='1'>";

for (var i = 1, len = msg.length; i < len; i=i+6) {
    if (msg[i+1] == 1) { //misc
        var rtype = "Miscellaneous"
        var rcolor = "#CCCCFF"
    } else if (msg[i+1] == 2) { //verbal
        var rtype = "Verbal"
        var rcolor = "#FFF000"
    } else if (msg[i+1] == 3) { //written
        var rtype = "Written"
        var rcolor = "#FFAA00"
    } else if (msg[i+1] == 4) { //Critical
        var rtype = "Critical"
        var rcolor = "#FF0000"
    } else if (msg[i+1] == 5) { //Positive
        var rtype = "Positive"
        var rcolor = "#55FF22"
    } else if (msg[i+1] == 6) { //Performance Review
        var rtype = "Performance Review"
        var rcolor = "#C8C8C8"
    }

    $('#viewcontent').html = $('#viewcontent').html + "<tr><td colspan='1' align='center' border='1' width='5%'><input type='radio' name='RID' value='" + msg[i+5] + "'></td><td class='file' colspan='1' align='center' border='1' width='20%' bgcolor='" + rcolor + "'><a href='upload_files/" + emp + "/" + msg[i+2] + "'>" + rtype + "</a></td><td colspan='1' align='center' border='1' width='15%'>" + msg[i] + "</td><td colspan='1' align='center' border='1' width='20%'>" + msg[i+4] + "</td><td colspan='1' align='center' border='1' width='40%'>" + msg[i+3] + "</td></tr>";

}
$('#viewcontent').html = $('#viewcontent').html +   "</table>";
</script>

This is resulting in an empty Div - content is being sent when using innerhtml I am receiving the content Without any tags

How do I append to this content without deleting and maintaining my html

Declare your variables once in a var statement at the top of your function, and not over and over again in each if clause. — Pointy
– Pointy, Commented Oct 7, 2015 at 20:49

Pointy · Accepted Answer · 2015-10-07 20:48:09Z

3

The jQuery .html property is a function:

$("something").html("some content");

Similarly, when you want to get the content:

var theContents = $("something").html();

answered Oct 7, 2015 at 20:48

Pointy

415k62 gold badges600 silver badges632 bronze badges

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

3 Comments

Barmar Over a year ago

Practically everything in jQuery is a function.

Pointy Over a year ago

@Barmar indeed it is! I guess there's always .length :)

Matt O'Connell Over a year ago

Don't forget .context and the ever-important .jquery

Abhijeet K. · Accepted Answer · 2015-10-07 20:51:53Z

Try the following

<div id="viewcontent"></div>



<script>
$('#viewcontent').html('');
             $('#viewcontent').append("<table bgcolor='#CCCCFF' bordercolor='#000000' align='center' width='600' border='1'>");

                for (var i = 1, len = msg.length; i < len; i=i+6) {
                    if (msg[i+1] == 1) { //misc
                        var rtype = "Miscellaneous"
                        var rcolor = "#CCCCFF"
                    } else if (msg[i+1] == 2) { //verbal
                        var rtype = "Verbal"
                        var rcolor = "#FFF000"
                    } else if (msg[i+1] == 3) { //written
                        var rtype = "Written"
                        var rcolor = "#FFAA00"
                    } else if (msg[i+1] == 4) { //Critical
                        var rtype = "Critical"
                        var rcolor = "#FF0000"
                    } else if (msg[i+1] == 5) { //Positive
                        var rtype = "Positive"
                        var rcolor = "#55FF22"
                    } else if (msg[i+1] == 6) { //Performance Review
                        var rtype = "Performance Review"
                        var rcolor = "#C8C8C8"
                    }

    $('#viewcontent').append("<tr><td colspan='1' align='center' border='1' width='5%'><input type='radio' name='RID' value='" + msg[i+5] + "'></td><td class='file' colspan='1' align='center' border='1' width='20%' bgcolor='" + rcolor + "'><a href='upload_files/" + emp + "/" + msg[i+2] + "'>" + rtype + "</a></td><td colspan='1' align='center' border='1' width='15%'>" + msg[i] + "</td><td colspan='1' align='center' border='1' width='20%'>" + msg[i+4] + "</td><td colspan='1' align='center' border='1' width='40%'>" + msg[i+3] + "</td></tr>");

}
$('#viewcontent').append("</table>");
</script>

Hope, this would help!

Collectives™ on Stack Overflow

javascript html tag not adding content

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related