为非必要内容构建异步客户端包含

问：

在 javascript 事件侦听器触发后，我想将几段非必要内容插入到几个不同的页面上（作为一系列操作的一部分）。

• 第 1 页显示非必要内容 A
• 第 2 页显示“无”
• 第 3 页显示非必要内容 B
• 第 4 页显示非必要内容 B
• 第 5 页显示非必要内容 C

“插入”的所有其他维度都是相同的 - 所有元素的脚本行为都是相同的，所有元素的 CSS 样式都是相同的 - 只是 HTML 标记结构和内容不同。

我的问题是：如何最好地插入非必要的内容？

可能的服务器端方法：

1. 通过服务器端语言将内容包含在文档中。稍后通过将 CSS 从 更改为 来显示内容。display: nonedisplay: block
2. 不要在文档中包含内容，而是在需要时使用 Ajax 从服务器获取它。

可能的客户端方法：

1. 使用（咩！document.write(''))
2. 使用（真的吗？<iframe>)
3. 异步加载 javascript 字符串并使用.innerHTML
4. 异步加载和解析 javascript 对象并使用 、 、 、{}document.createElement()setAttribute()document.createTextNode.textContent.appendchild()

我觉得使用 （Client-Side：3） 有点脏（与 Client-Side：4 相比），但无论如何我都选择了 Client-Side：3：.innerHTML

非必要内容

var nonEssentialContent = '';
nonEssentialContent += '<h2>Roses are Red...</h2>';
nonEssentialContent += '<p>Roses are red,<br />';
nonEssentialContent += 'Violets are blue,<br />';
nonEssentialContent += 'Client-Side Includes are new to me,<br />';
nonEssentialContent += '<span class="last-line">How about you?</span></p>';

异步加载非必要内容

var nonEssentialContentScript = document.createElement('script');

function loadMainEvent() {

    [... CODE HERE...]

    containerDiv.innerHTML = nonEssentialContent;

    [... CODE HERE...]

}

function loadNonEssentialContent() {
    nonEssentialContentScript.setAttribute('src', '/path/to/non-essential-content.js');
    document.body.appendChild(nonEssentialContentScript);
    nonEssentialContentScript.addEventListener('load', loadMainEvent, false);
}

loadNonEssentialContent();

我唠叨的感觉是，因为我是自学成才的，我可能缺少一种非常明显（和优越）的方法来构建客户端包含。

我还担心，即使上述方法适用于生产环境，它也可能包含我没有想到的陷阱。

所以，上面的问题又来了......如何最好地插入非必要内容？