在不使用选择器的情况下使用 javascript 更改 HTML答案

【问题标题】：Changing HTML using javascript without using selectors在不使用选择器的情况下使用 javascript 更改 HTML
【发布时间】：2013-02-11 10:48:05
【问题描述】：

好的 - 首先我知道这并不理想 - 但是我们继承了一个问题并且一些经过深思熟虑的 SSI html。

一些背景知识：我们已经实现了一个响应式网站，其中必须包含来自客户端的一些 SSI 代码，用于全球顶部导航和页脚 - 到目前为止一切都很好。但是，当网站在移动设备上调整大小/加载时，SSI 需要从 DESKTOP 更改为 MOBILE。我们目前正在做所有这些客户端。我们在断点处有一个触发器来改变 dom 以执行所有响应式操作。

这里有一个类似的例子http://www.conrandesigngroup.com。（调整浏览器大小，看看会发生什么。）

通常我们会将 SSI 加载到保存页面中，并使用某种选择器将代码 AJAX 到适当的位置。

问题：SSI 不是完整的 HTML，它看起来像这样：

<!-- desktop ssi -->
</head>
<body>
Whole bunch of desktop html...
<div class="content">

那么我们为移动网站设置的 SSI 是：

<!-- mobile ssi -->
<script>some script...</script>
</head>
<body>
Whole bunch of mobile html...
<div class="content">

所以你会注意到有一个结束</head> 和一个开口<body>，最后有一个开口<div>。所以我们无法选择它并使用 DOM 替换。我们正在考虑在代码的任一侧使用 cmets 并使用 javascript 正则表达式来替换代码。我不确定这是否真的会更新浏览器。

所以在桌面模式下，整个页面将如下所示：

<html>
<title>my page</title>
<head>
...all the head stuff
<!-- START of ssi -->
<!-- desktop ssi -->
</head>
<body>
Whole bunch of desktop html...
<div class="content">
<!-- END of SSI -->
...all the page HTML
</div>
</body>
</html>

没关系 - HTML 全部放在服务器端，我们可以正确打开和关闭标签。问题是我们如何使用客户端代码 <!- START of ssi -->... 更改 cmets 内的 HTML

最后，这并不是一个真正的 SSI 问题 - 而是一种更改一些 HTML 的方法，这些 HTML 没有很好地包含在一个元素中。

有人遇到过这个问题或者有什么建议吗？

【问题讨论】：

第二个</head>是故意的吗？
是的 - 2 位代码来自 2 个不同的服务器端包括。我们无法控制这些文件。关闭头是问题的一部分。
为什么响应式元素是从服务器端驱动的？是否使用了媒体查询？也许我很难理解这个问题？
这是一个遗留问题。 SSI 文件是我们必须包含的内容——它们是公司网站的全局导航。响应式元素不是在服务器端驱动的，它的所有静态 HTML（带有 SSI）都在客户端完成了响应式的东西。
所以我们必须提供静态 HTML - 带有 SSI。但是 SSI 中的 html 必须针对移动和桌面进行更改。我们无法更改 SSI - 它们基本上是静态的。所以我们需要能够为不同的前端模式有效地加载不同的 SSI。

标签： javascript html ajax responsive-design ssi

【解决方案1】：

共同点是这样的：

body 元素包含内容
移动和桌面内容均以正文的第一个子项开头

清空第一个元素的代码对于两个版本都是相同的：

document.getElementsByTagName("body")[0].firstChild.innerHTML = "";

将代码包装在pre 元素中，以便于修改。

参考文献

W3C DOM4

【讨论】：