Javascript 用另一个内容替换div的内容

我已经建立了一个链接列表，所有这些链接都应该在单击后将div的内容更改为另一个特定内容（大约4行内容：姓名、网站、联系人等）

我发现这个代码：

<script type="text/javascript">
    function ReplaceContentInContainer(id,content) {
        var container = document.getElementById(id);
        container.innerHTML = content;
    }
</script>

函数替换内容容器（id，内容）{
var container=document.getElementById（id）；
container.innerHTML=内容；
}

并以这样的方式使用它：

<li class="pl11">
    <a href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href="http://address.com">superlink</a>')">Pomorskie</a>
</li>

“）”>Pomorskie

但它并没有像我预期的那样起作用

它将超链接文本从“Pomorskie”更改为“superlink”

纯文本工作得很好，但我需要链接

以下是（只有两个显示任何内容）

但是在尝试了你所有的推荐之后，我想我会跳转到不同的div，使用#links，因为这个没用：//

---

非常感谢您的尝试，干杯：）

引用不匹配！因此，当您单击时，您将收到一个JavaScript错误

浏览器会看到以下字符串：

href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href="http://address.com">superlink</a>')">Pomorskie<

例如

---

另外请注意，使用href标记进行JavaScript是一种不好的做法。

嵌套引号有问题。请查看DOM检查器，看看HTML解析器是如何从中生成的！（例如，在中）

您需要以HTML格式将属性内的引号转义为

“

或

"，或将其转换为撇号，并在JS字符串中用反斜杠转义：

”）“>…
')">…

请参阅工作演示和

更好的是，您应该使用
onclick
属性，而不是
javascript
-伪url:

<a onclick="ReplaceContentInContainer('wojewodztwo', …)">Pomorskie</a>

：


');
event.prevenDefault（）；
};

（）
我建议避免嵌套的怪异性/复杂性，并减少问题的发生

将内容设置为隐藏（即，
…
）从所需节点抓取
innerHTML
，然后完成操作

通过这种方式，从非开发人员那里获取替换内容也容易得多，如果你在一个团队中，效果会很好

// Probably better in a separate helpers.js file.
   function replaceContentInContainer(target, source) {
      document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
   }

控制它：（丢失
href=javascript:
并使用onClick，更好地用作，但为了简洁起见，我将在这里将其作为onClick属性内联，并使用按钮。）

替换它

我们的目标在文件的某个地方

<div id="target">My content will be replaced</div>

我的内容将被替换

然后替换内容隐藏在replacements div中

<div id="replacements" style="display:none">
  <span id="replace_target"><a href="http://address.com">superlink</a></span>
</div>



在这里

通过使用JS模板库或其他漂亮的JS模板库来改善动态特性，但这是OP的练习

编辑：注意，您还应该使用前导小写字母命名函数，并为类名保留前导大写样式，例如
var mySweetInstance=new MySpecialObject（）
你能为
wojewodztwo
对象添加代码吗？你能给出一个前后链接的示例，说明你希望链接如何显示吗？@PatrickGunderson wojewodztwo只是一个将被替换的div:“你的HTML无效，它必须是
”>
（注意转义引号）@Bergi
”
不是转义的，它是一个实体引用<代码>\“
是转义的，
%22
是url编码的。+1用于思考给定url之外的内容并考虑空格。我删除了我的答案。虽然它在没有
“
的情况下对OP的给定url有效，但它并不像您正确指出的那样完全正确。既然你已经讲过了，我没有必要在另一个答案中重复同样的内容。接得好。谢谢伙计们，不过没什么帮助。我编辑了这个问题，然后把它放在一边，我想我会把它放在一边的。干杯在演示中效果非常好！我马上就来试试这个：）谢谢！好的，这对我不起作用：/谢谢你的帮助。我想我会选择跳转到不同div的链接，而不是替换一个。谢谢，干杯！哇，我有点吃惊，转义的
\“
在这种情况下不起作用。@Slomojo是的，我正在尝试一个最北的（在地图上）@user1399364是的，我会对使用
\'
感到有点担心，即使它确实起作用，我也会担心它（可能在另一个（未来？）JS引擎中坏了，而且很难找到/调试。）归根结底，这最好用一点间接的方式来完成，这样您就可以用一种不那么脆弱的方式来组合锚元素。OMG it WORKS的函数ReplaceContentInContainer（id，id2）{var container=document.getElementById（id）；var container2=document.getElementById（id2）；container.innerHTML=container2.innerHTML；}总是试着用抽象/间接（如果你喜欢的话，可以用“分而治之”）来解决问题，它们会变得更容易，你越是把事情分开，当你重新开始时，一切都会感觉更愉快。
// Probably better in a separate helpers.js file.
   function replaceContentInContainer(target, source) {
      document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
   }

<button onClick="replaceContentInContainer('target', 'replace_target')">Replace it</button>

<div id="target">My content will be replaced</div>

<div id="replacements" style="display:none">
  <span id="replace_target"><a href="http://address.com">superlink</a></span>
</div>