Javascript 替换文本，然后将其替换回

当用户单击链接时，我使用此代码替换页面上的文本。我想一种方法，以取代它回到最初的文本使用另一个链接在被取代的文本，而不必重新加载页面。我试着简单地在替换的文本中添加相同的脚本，然后切换“place”和“rep_place”，但没有成功。有什么想法吗？我是一个编程新手，所以谢谢你的建议

<div id="place">
Initial text here
<SCRIPT LANGUAGE="JavaScript">
  function replaceContentInContainer(target,source) {
    document.getElementById(target).innerHTML  = document.getElementById(source).innerHTML;
  }
 </script>
     <div class="text" onClick="replaceContentInContainer('place', 'rep_place')">
      <u><a href="#">Link to replace text</a></u></div></div>
<div id="replacements" style="display:none">
  <span id="rep_place">
 Replacement text here
</div></span>

此处为初始文本
函数replaceContentInContainer（目标、源）{
document.getElementById（目标）.innerHTML=document.getElementById（源）.innerHTML；
}
此处为替换文本

您将原始文本存储在哪里？考虑一下你正在做的一些简单的代码……/P>

a = 123;
b = 456;
a = b;
// now how do you get the original value of "a"?

您需要将该值存储在某个位置：

a = 123;
b = 456;
temp = a;
a = b;
// to reset "a", set it to "temp"

因此，在您的情况下，您需要将这些内容存储在某个位置。看起来“源”是一个隐藏的元素，它可以很容易地保存替换的值。这样，值就可以交换，而不仅仅是复制。大概是这样的：

function replaceContentInContainer(target,source) {
    var temp = document.getElementById(target).innerHTML;
    document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
    document.getElementById(source).innerHTML = temp;
}

因此，你可以简单地称之为：

replaceContentInContainer('place', 'rep_place')

然后，要将它们调回：

replaceContentInContainer('rep_place', 'place')

---

请注意，这将替换“source”元素的内容，直到它们再次交换回来。从当前的代码中，我们无法知道这是否会影响页面上的任何其他内容。如果是这样，您可以使用不同的元素来存储原始值。如果需要存储大量的值，则可能会很快变得复杂。

工作示例：

我所做的主要改变如下：

我使用了

textContent

而不是

innerHTML

，因为后者会替换整个DOM内容，这包括删除链接以替换文本。之后无法生成该事件

我关闭了第一个

div

，否则所有文本都将被

innerText

删除，包括用作链接的文本

您说过要替换回原始文本，所以我使用了一个变量来保存最后一个值（如果存在）

---

希望这对您有所帮助，如果您需要更多帮助，请告诉我。

div标签被弄混了，在运行它之后，您的链接被删除了。我只是使用了你的代码，并演示了如何切换

<div id="place">
Initial text here
</div>
<SCRIPT LANGUAGE="JavaScript">
  function replaceContentInContainer(target,source) {
    document.getElementById(target).innerHTML  = 

 document.getElementById(source).innerHTML;
  }
  </script>
     <div class="text" onClick="replaceContentInContainer('place', 'rep_place')">
  <u><a href="#">Link to replace text</a></u></div>
 <div class="text" onClick="replaceContentInContainer('place', 'original_place')">
  <u><a href="#">Link to restore text</a></u></div>

<div id="replacements" style="display:none">
  <span id="rep_place">
Replacement text here
</span>
<span id="original_place">
Initial text here
</span>
</div>

此处为初始文本
函数replaceContentInContainer（目标、源）{
document.getElementById（目标）.innerHTML=
getElementById（源代码）.innerHTML；
}
此处为替换文本
此处为初始文本

这是怎么回事？我将初始内容存储在名为initialContent的数组元素中

<div id="place">
Initial text here [<a href="#" onClick="replaceContentInContainer('place', 'rep_place')">replace</a>]
</div>

<div id="replacements" style="display:none">
    <span id="rep_place">
    Replacement text here [<a href="#" onclick="showInitialContent('place')">revert</a>]
    </span>
</div>

<SCRIPT LANGUAGE="JavaScript">
var initialContent = [];

function replaceContentInContainer(target,source) {
    initialContent[target] = document.getElementById(target).innerHTML;
    document.getElementById(target).innerHTML  = document.getElementById(source).innerHTML;
}

function showInitialContent(target) {
    document.getElementById(target).innerHTML = initialContent[target];
}
</SCRIPT>

此处为初始文本[]
此处替换文本[]
var initialContent=[]；
函数replaceContentInContainer（目标、源）{
initialContent[target]=document.getElementById（target.innerHTML；
document.getElementById（目标）.innerHTML=document.getElementById（源）.innerHTML；
}
函数showInitialContent（目标）{
document.getElementById（target.innerHTML=initialContent[target]；
}

将原始文本存储到元素上的

数据-

属性中，以便以后可以检索。就像这样：不过，不能说我对代码总体上太感兴趣。