使用javascript将html占位符文本替换为html元素

Question

我有一种情况，在我的页面中有一个占位符文本，在页面完全加载后将替换该文本。 我的问题是我需要替换的文本是Recaptcha图像的插件，例如：

我正在loading...文本loading...将被替换为：

<recaptcha:recaptchacontrol ID='recaptcha' runat='server' PublicKey='kfldsjfh4378qyf43h4eidfhew' PrivateKey='sdflkdsfy908s6dfdsfkj' Theme='clean' />

我找不到方法，将不胜感激。

Answer 1

在聊天中找到了答案：

由于<recaptcha:...>标签是由某些服务器端插件解析的，因此在客户端JS中将它们写入后不会呈现它们。 所以更换工作正常，但插件没有...

Answer 2

您可以在document.body.innerHtml上执行任何字符串操作（例如搜索和替换）：

document.body.innerHtml = document.body.innerHtml.replace(/Loading\.\.\./g,
                                                          "<recaptcha...>");

Answer 3

将您的“正在加载...”文本包装在具有唯一ID的<span> ，例如

<span id="removeme">Loading...</span>

然后，如果您不想使用该复杂的命名空间标签做太多的DOM-fu，则可以执行以下操作：

var removeme = document.getElementById('removeme');
removeme.innerHTML = "<recaptcha:recaptchacontrol ...";
var recaptchaThing = removeme.firstChild;
removeme.removeChild(recaptchaThing);
var parent = removeme.parentNode;
parent.insertBefore(recaptchaThing, removeme);
parent.removeChild(removeme);

在让浏览器弄清楚如何为该奇怪元素构建DOM之后，这将用<recaptcha:recaptchacontrol>元素替换<span> 。 如果事实证明不能将<recaptcha:recaptchacontrol>放置在<span>元素内，则将其设置为<div style="display:inline"> 。