是否可以在 JavaScript 中包含 HTML 代码?

2023-11-23

我有一个基本问题,我可以在 JS 中包含 HTML 代码吗? (和document.write)

这是我的 HTML 代码:

<li><a href="#" class="menulink">text</a></li>
<li><a href="#" class="menulink">text</a></li>
<li>
  <a href="#" class="menulink">text</a>
  <ul>
    <li>
      <a href="#" class="sub">text</a>
      <ul>
        <li class="topline"><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
      </ul>
    </li>
    <li>
      <a href="#" class="sub">text</a>
      <ul>
        <li class="topline"><a href="#">text</a></li>
        <li><a href="#">text</a></li>
      </ul>
    </li>

    <li>
      <a href="#" class="sub">text</a>
    </li>
    <li>
      <a href="#" class="sub">text</a>
    </li>
  </ul>
</li>

<li>
  <a href="#" class="menulink">text</a>
</li>
<li><a href="#" class="menulink">text</a></li>

我想将它包含在这段 JS 代码中:

window.onload = function () {
  document.getElementById("menu").innerHTML="";
}

通过以下代码连接它:

<p id="dropdown_menu"></p>

我该怎么做?

完整的代码在这里 http://jsfiddle.net/tsnave/eSgWj/4/谢谢..


另一种方法是将 HTML 放入脚本标记中:

<script type="text/template" id="myHtml">
    <li class="topline"><a href="#">some text</a></li>
    <li><a href="#">some text </a></li>
    <li><a href="#">some text</a></li>
    <li><a href="#">some text</a></li>
    <li><a href="#"some text</a></li>
    <li><a href="#">some text</a></li>
    <li><a href="#">some text</a></li>
</script>

然后你可以使用它进入Javascript

var myHtml = document.getElementById('myHtml').innerHTML;

或使用几个可以帮助您完成此任务的库之一。脚本标签内的代码type="text/template"浏览器不会解释或显示。与将其直接放入 Javascript 中的字符串相比,这种方法的优点在于,它允许您在编辑器中继续将其视为普通 HTML,并且可以保持 Javascript 的干净。也可以看看约翰·雷西格的这篇文章.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

是否可以在 JavaScript 中包含 HTML 代码? 的相关文章

  • 检查 JavaScript 字符串是否为 URL

    JavaScript 有没有办法检查字符串是否是 URL 正则表达式被排除在外 因为 URL 很可能是这样写的stackoverflow 也就是说它可能没有 com www or http 如果你想检查一个字符串是否是有效的 HTTP UR
  • 如何监听 jQuery AJAX 请求?

    以下两种实现 ajaxRequest 1 2 的方法应该是等效的 话说回来 为什么验证回调已执行的单元测试 3 在 1 中成功而在 2 中失败 我应该如何重写测试 3 来监视 2 中的成功回调 如果我尝试stub jQuery ajax使用
  • 为什么是 javascript:history.go(-1);无法在移动设备上工作?

    首先 一些背景 我有一个向用户呈现搜索页面 html 表单 的应用程序 填写标准并单击 搜索 按钮后 结果将显示在标准部分下方 在结果列表中 您可以通过单击将您带到新页面的链接来查看单个结果的详细信息 在详细信息页面中 我添加了一个 返回结
  • 标签获取 href 值

    我有以下 html div class threeimages a img alt Australia src Images Services 20button tcm7 9688 gif a div class text h2 a hre
  • 音频 blob 的 URL.createObjectURL 在 Firefox 中给出 TypeError

    我正在尝试从创建的音频 blob 创建对象 URLgetUserMedia 该代码在 Chrome 中可以运行 但在 Firefox 中存在问题 错误 当我打电话时stopAudioRecorder 它停在audio player src
  • 保持未知数量的 div 居中,每行最多 4 个

    我有一个简单的问题 但我自己无法解决 简而言之 有一个未知电话我必须在页面中放置的元素数量 最多 每行 4 个元素 但仍居中 此图片给您一个提示 我为了示例而设置它 详细 在上图中我涵盖了不同的场景 例如 如果总共有 5 个元素 则应使用第
  • 在javascript中解析json - 长数字被四舍五入

    我需要解析一个包含长数字的 json 在 java servlet 中生成 问题是长数字被四舍五入 当执行这段代码时 var s x 6855337641038665531 var obj JSON parse s alert obj x
  • HTML 中部分着色的阿拉伯语单词

    我不会说阿拉伯语 但我需要我们网站上对阿拉伯语的具体支持 我需要将部分阿拉伯语单词放在 span 与单词其他部分的风格不同 当我输入两个字符时 and 它们被组合成word 但是当我使用 HTML 标记时 span span 这些字母在输出
  • 在 webpack 2.x 中使用 autoprefixer 和 postcss

    如何使用autoprefixer使用 webpack 2 x 以前 它曾经是这样的 module loaders test scss loader style css sass postcss postcss gt return autop
  • 如何使输入字段和提交按钮变灰

    我想变灰这两件事 http doorsplit heroku com 歌曲输入字段和提交按钮 直到用户输入艺术家 有没有一种简单的方法可以通过 JQuery 来做到这一点 艺术家输入字段的id是 request artist 你可以这样做
  • Firefox 书签探索未超过 Javascript 的第一级

    我已经编写了一些代码来探索我的 Firefox 书签 但我只获得了第一级书签 即我没有获得文件夹中的链接 e g 搜索引擎 雅虎网站 谷歌网站 在此示例中 我只能访问 Search engines 和 google com 不能访问 yah
  • Grails 在 javascript 内的 GSP 站点中使用 grails var

    我有一个在 GSP 文件中的 javascript 代码中使用 grails 变量值的问题 例如 我有一个会话值session getAttribute selectedValue 我想在 javascript 代码部分使用这个值 我现在的
  • Electron - 为什么在关闭事件时将 BrowserWindow 实例设置为 null

    The 电子文档 https electronjs org docs api browser window 提供以下代码示例来创建新窗口 const BrowserWindow require electron let win new Br
  • Laravel 中只向登录用户显示按钮

    如果我以 John 身份登录 如何才能只显示 John 的红色按钮而不显示 Susan 的红色按钮 测试系统环境 Win10 Laravel5 4 Mysql5 7 19 table class table table responsive
  • 在 vue.js 中访问数组对象属性

    给定以下数组vue js packageMaps Object packageMap 0 Object Id 16 PackageType flag list ProductCode F BannerBase packageMap 1 Ob
  • 更改文本输入标签中文本的大小?

    我有一个很大的文本输入框 但我无法更改字体大小
  • JQuery 图像上传不适用于未来的活动

    我希望我的用户可以通过帖子上传图像 因此 每个回复表单都有一个上传表单 用户可以通过单击上传按钮上传图像 然后单击提交来提交帖子 现在我的上传表单可以上传第一个回复的图像 但第二个回复的上传不起作用 我的提交过程 Ajax 在 php 提交
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
  • 为什么元素上的负底部边距会降低该元素父元素的高度?

    这可能是由于边距折叠造成的 我知道边距折叠 至少知道它如何影响相邻元素 但我不明白当涉及负边距时它如何在嵌套元素上工作 例如 在此标记和随附的 CSS 中 Markup div class parent div class child Ch
  • fullCalendar 未显示正确的结束日期

    我正在看调试页面 http jsbin com wukofacaxu edit js outputFullCalendar 官方网站的 我想安排一个活动时间为 22 09 2015 至 30 09 2015 dd mm yyyy 但它只显示

随机推荐

  • 如何制作一个字典,返回字典中缺少的键的键,而不是引发 KeyError?

    我想创建一个 python 字典 它返回字典中缺少的键的键值 使用示例 dic smart dict dic a one a print dic a gt gt gt one a print dic b gt gt gt b dicts 有
  • 如何使用 HQL 将“null”放入列中?

    如何构建有效的HQL字符串 相当于 UPDATE 表 SET 字段 null WHERE 您的意思是批量 HQL 更新吗 尝试这个 UPDATE myEntity e SET e myProperty null WHERE 您还可以使用上述
  • 在 iPhone 上存储用户名和密码的最佳做法是什么?

    是否有在 iPhone 上存储用户名和密码的最佳实践方法 我正在寻找明显安全的东西 但也会在应用程序更新之间保留信息 使用苹果钥匙串 NSString getPasswordForUsername NSString username and
  • “显示完整站点”按钮可绕过 CSS 媒体查询

    我在我的网站上使用 CSS 媒体查询 以在较小的设备上切换到更垂直的布局 这工作得很好 但我想在网站上添加一个按钮 其中包含 显示桌面版本 之类的内容 我想让这个按钮 或链接 无论什么 强制或改变媒体查询评估 以便它们评估好像屏幕宽度比实际
  • Jenkins 在 Mercurial 提交后构建

    我已经在这个项目上工作了大约一周 我已经在网上搜索了两天 没有任何明确的解释 对于学校作业 我们需要使用以下程序设置构建服务器 Maven 作为我们的构建工具 Mercurial 作为我们的版本控制系统 Java JRE javac 和 j
  • 愤怒的小鸟喜欢滚动菜单

    当您启动 愤怒的小鸟 并点击 开始 时 您会看到一个水平滚动的菜单 其中有一条居中的图像 单击后您就可以开始游戏等等 我想知道如何制作一个与此类似的菜单 它可以横向滚动 水平 并显示可点击的图像 提前致谢 我认为你可以通过水平滚动视图 Ho
  • 无法在函数内访问 jQuery $.get 中的全局变量

    下面是我遇到问题的一些代码 基本上 我将一个空数组定义为全局变量 var playlist 然后尝试在 jQuery get 调用中向其中添加元素 根据我在互联网上读到的内容 我应该能够做到这一点 以下代码给出错误 无法调用未定义的方法 p
  • 混合类型类和类型族时出现问题

    这段代码编译得很好 LANGUAGE MultiParamTypeClasses FunctionalDependencies FlexibleInstances UndecidableInstances FlexibleContexts
  • 如何使用@Autowired像工厂模式一样动态注入实现

    我对 Sprint 相当陌生 我的应用程序使用 Spring 3 x 和 roo1 1 1 我有一个接口的多个实现 该接口将被 Autowired 到其他不同的类中 我只能在运行时决定采用哪种实现 这应该通过类似工厂模式来实现 public
  • 如何为登录用户更改 ionic 中的侧菜单

    我想在用户登录时更改侧面菜单的内容 示例 1 用户未登录 当用户未登录时 会显示此侧面菜单 示例 2 用户已登录 正如您所看到的 有几个额外的菜单项 这些仅在用户登录时显示 在我的控制器中 http get http 127 0 0 1 8
  • 使用 IntelliJ IDEA 生成 JavaDoc 中的图像[重复]

    这个问题在这里已经有答案了 我正在尝试将图像包含在我的 JavaDoc 中 我跟随文档并将图像存储在doc files在包目录中 我的 javadoc 看起来像 This is class desctiprion Image p img s
  • 获取当前用户上下文

    我在从不同位置 C 应用程序 Web 服务 运行 powershellscript 时遇到问题 我认为这是一个用户上下文问题 所以现在我试图找出 powershell 脚本在哪个用户上下文下运行 是否有可能记录 powershell 脚本的
  • 从另一个视图类重新加载集合视图数据

    我的视图中有两个容器 最上面有一个集合视图 当从下面的容器点击按钮时 我想通过按钮更新我的集合视图 我的按钮还更改了我的集合视图使用的数组的值 我以为 didSet 可以完成这项工作 但不幸的是没有成功 Top class TopViewC
  • ASP.NET MVC5 未针对请求的 URL 配置 Web 服务器,并且服务器上未启用目录浏览

    我在从 MVC5 应用程序加载页面时遇到问题 我安装并使用了这个软件 Windows 10 Visual Studio 企业版 2015 微软 IIS 10 0 Express MVC 5 与实体框架 到目前为止 一切正常 我能够显示该网站
  • JSON.parse意外字符错误

    我收到此错误 JSON parse 意外字符 当我在萤火虫中运行此语句时 JSON parse balance 0 count 0 time 1323973673061 firstname howard userId 5383 locali
  • 为简单的 WCF 服务启用基本身份验证?

    我有一个非常简单的 WCF Web 服务 客户在自己的 IIS 上托管该服务 客户有自己的客户端 他们一直在测试环境中对其进行测试 一切都工作正常 直到他们禁用匿名身份验证并启用基本身份验证 一旦他们这样做了 他们就开始出现错误 The a
  • Firestore 时间戳获取 null

    我在我的 android 项目中使用 firestore 一切正常 但是昨天从文档快照获取时间戳值时出现了问题 if documentChange getType DocumentChange Type ADDED Map
  • 自动生成命令以在工作区中重现对象[重复]

    这个问题在这里已经有答案了 假设工作区中已经定义了一个对象 a lt round rnorm 10 1 0 1 1 1 1 0 2 1 1 1 如何以编程方式生成一个命令来创建a 例如 我想使用a在我的工作区中生成以下字符串codeToCr
  • 防止双重表单提交[重复]

    这个问题在这里已经有答案了 精确复制 如何在服务器端处理多个提交 当前的一般任务 防止在多用户基于 Web 的应用程序中提交双重表单 想想金融交易 我有两种可以同时使用的方法 JavaScript disabling of button 缺
  • 是否可以在 JavaScript 中包含 HTML 代码?

    我有一个基本问题 我可以在 JS 中包含 HTML 代码吗 和document write 这是我的 HTML 代码 li a href class menulink text a li li a href class menulink t