Use JavaScript to Programatically write html

Question

I know this is a stupid question so i apologize in advance.

Basically, at a super high level, what I'm trying to do is display x number of tabs. x will be a variable that will eventually be the number returned in results returned from SharePoint.

So, basically what I want is JavaScript looping a given block of html code (to create the 'tabs') based off of a variable.

I would like to loop the <li> tag x number of times.

Here's the code.....

HTML Page:

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral,     PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"  Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral,   PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %> 
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="VisualWebPart1UserControl.ascx.cs"     Inherits="SPListWebPart.VisualWebPart1.VisualWebPart1UserControl" %>
<!DOCTYPE html>
<html>
<head>
<link rel="Stylesheet" type="text/css" href="C:\Users\Administrator\Documents\Visual    Studio 2010\Projects\SPListWebPart\SPListWebPart\VisualWebPart1\Stylesheet1.css" />
<ul id="sddm">


<script type ="text/javascript" src = "C:\Users\Administrator\Documents\Visual Studio  2010\Projects\SPListWebPart\SPListWebPart\VisualWebPart1\JScript1.js"></script>
<script type ="text/C#" src="C:\Users\Administrator\Documents\Visual Studio      2010\Projects\SPListWebPart\SPListWebPart\VisualWebPart1\VisualWebPart1UserControl.ascx.cs"     ></script>




<!--START JAVASCRIPT OR C# LOOP-->

<li><a href="http://maindt" 
    onmouseover="mopen('m1');"
    onmouseout="mclosetime('m1')">Variable</a>
    <div id="m1" 
        onmouseover="mcancelclosetime()"
        onmouseout="mclosetime()">
    </div>
</li>


<!--END JAVASCRIPT OR C# LOOP-->


<div style="clear:both"></div>
</head>
<body></body>
</html>

JavaScript:

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;




// open hidden layer
function mopen(id) {
// cancel close timer
mcancelclosetime();

// close old layer
if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose() {
  if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime() {
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime() {
if (closetimer) {
    window.clearTimeout(closetimer);
    closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;

CSS:

#sddm
{   margin: 0;
padding: 0;
z-index: 30}

#sddm li
{   margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial}

#sddm li a
{   display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: auto;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none}

#sddm li a:hover
{   background: #49A3FF}

#sddm div
{   position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2}

#sddm div a
{   position: relative;
    display: block;
    margin: 0;
    padding: 5px 10px;
    width: auto;
    white-space: nowrap;
    text-align: left;
    text-decoration: none;
    background: #EAEBD8;
    color: #2875DE;
    font: 11px arial}

#sddm div a:hover
{   background: #49A3FF;
    color: #FFF}

You should look into a javascript templating library like [Handlebars](http://handlebarsjs.com/) — Problematic, Jul 10 '13 at 01:52

score 1 · Accepted Answer · edited May 23 '17 at 11:49

If you have a server side request anyway, why not you do it in C#, just add a Literal inside your ul

<ul id="sddm">
<!--START JAVASCRIPT OR C# LOOP-->

 <asp:Literal ID="ltrLIs" runat="server"></asp:Literal>

<!--END JAVASCRIPT OR C# LOOP-->

</ul>

Now in code behind loop it, add and pass your variable like:

ltr_Clear.Text += "<li><a href='http://maindt' onmouseover='mopen('m1');' onmouseout='mclosetime('m1')'>" + Variable + "</a> <div id='m1' onmouseover='mcancelclosetime()' onmouseout='mclosetime()'> </div> </li>";

If you want to inject a JavaScript from your code behind you can use: Page.ClientScript.RegisterClientScriptBlock or Page.ClientScript.RegisterStartupScript read THIS to learn the difference.

Hope that this is going to help you.

I can see that you have edited your question, however, this answer is still valid to add from code behind. — Alaa Alweish, Jul 10 '13 at 01:53

score 1 · Answer 2 · answered Jul 10 '13 at 01:48

To write stuff in HTML on the document using Javascript: do

document.write("<li>" + Variable + "</li>");

or get the element and change its innerHTML property

document.getElementById("list").innerHTML = "<li>" + Variable + "</li>";

To write stuff in HTML on the document using C#: do

<%="<li>" + Variable + "</li>" %>

To loop in Javascript: do

for (var i = 0; i < Variable; i++)

To loop in C#: do

<% for (int i = 0; i < Variable; i++) %>

So basically, this is the combined code:

Javascript:

<!--END JAVASCRIPT OR C# LOOP-->

<script type="text/javascript">
    for (var i = 0; i < Variable; i++)
        document.write("<li>" + Variable + "</li>");
</script>

<!--END JAVASCRIPT OR C# LOOP-->

C#:

<!--START JAVASCRIPT OR C# LOOP-->

<% for (int i = 0; i < Variable; i++) %>
    <%= "<li>" + Variable + "</li>" %>

<!--END JAVASCRIPT OR C# LOOP-->

Some links that can help:

document.write
innerHTML

score 1 · Answer 3 · answered Jul 10 '13 at 02:15

You're question isn't really that stupid. A lot of modern web apps need to re-render the page and lists are common structured ways of creating things like image sliders that load new images with ajax.

I'd really say it wouldn't hurt to learn some jquery. Jquery allows you to append list items to a given list upon an event fire. For example if you wanted "#btn_create" to create a list item in the list "#tabs", and you wanted to set "Hello World" as the list item text you'd have something like this:

   $("#btn_create").click(function(){
      $("#tabs").append("<li>Hello World</li>")
   }

Jquery can help out a lot in other aspects as well, especially when designing the user interface, handling ajax requests/responses, modifying portions of the document, and eye candy.

Use JavaScript to Programatically write html

3 Answers3