使用 JavaScript 以编程方式编写 html [关闭]
Posted
技术标签:
【中文标题】使用 JavaScript 以编程方式编写 html [关闭]【英文标题】：Use JavaScript to Programatically write html [closed] 【发布时间】：2013-07-07 19:08:00 【问题描述】：我知道这是一个愚蠢的问题，所以我提前道歉。
基本上，在超高水平上，我想要做的是显示 x 个标签。 x 将是一个变量，最终将是从 SharePoint 返回的结果中返回的数字。
所以，基本上我想要的是 javascript 根据变量循环给定的 html 代码块（以创建“选项卡”）。
我想循环<li>标签x次。
这是代码.....
HTML 页面：
<%@ 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
【问题讨论】：
你应该看看像Handlebars这样的javascript模板库 【参考方案1】：如果你有一个服务器端请求，为什么不用 C# 来做呢， 只需在 ul
中添加 Literal<ul id="sddm">
<!--START JAVASCRIPT OR C# LOOP-->
<asp:Literal ID="ltrLIs" runat="server"></asp:Literal>
<!--END JAVASCRIPT OR C# LOOP-->
</ul>
现在在循环后面的代码中，添加并传递您的变量，例如：
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>";
如果您想从您的代码中注入 JavaScript，您可以使用：
Page.ClientScript.RegisterClientScriptBlock 或 Page.ClientScript.RegisterStartupScript
阅读THIS 了解其中的区别。
希望对您有所帮助。
【讨论】：
我可以看到您已经编辑了您的问题，但是，从后面的代码中添加此答案仍然有效。 是的，这很有帮助！谢谢！【参考方案2】：使用 Javascript 在文档上编写 HTML 内容： 做
document.write("<li>" + Variable + "</li>");
或获取元素并更改其innerHTML 属性
document.getElementById("list").innerHTML = "<li>" + Variable + "</li>";
使用 C# 以 HTML 格式在文档上写东西： 做
<%="<li>" + Variable + "</li>" %>
在 Javascript 中循环： 做
for (var i = 0; i < Variable; i++)
在C#中循环：做
<% for (int i = 0; i < Variable; i++) %>
所以基本上，这是组合代码：
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-->
一些可以提供帮助的链接：
document.writeinnerHTML
【讨论】：
【参考方案3】：你的问题并没有那么愚蠢。许多现代网络应用程序需要重新渲染页面，而列表是常见的结构化方式来创建诸如使用 ajax 加载新图像的图像滑块之类的东西。
我真的会说学习一些 jquery 不会有什么坏处。 Jquery 允许您在事件触发时将列表项附加到给定列表。例如，如果您希望“#btn_create”在列表“#tabs”中创建一个列表项，并且您想将“Hello World”设置为列表项文本，您将拥有如下内容：
$("#btn_create").click(function()
$("#tabs").append("<li>Hello World</li>")
Jquery 在其他方面也有很大帮助，尤其是在设计用户界面、处理 ajax 请求/响应、修改文档的某些部分以及吸引眼球时。
【讨论】：
以上是关于使用 JavaScript 以编程方式编写 html [关闭]的主要内容，如果未能解决你的问题，请参考以下文章
Selenium 的任何 Python 替代品，用于以编程方式登录需要 JavaScript 登录的网站？
以编程方式运行查询并将其导出为 DataGrip 中的 CSV 文件