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

Question

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

我找到了这段代码：

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

并以这种方式使用它：

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

它并没有像我预期的那样工作。

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

纯文本可以正常工作，但我需要链接。

这是http://xn--pytyfundamentowe-jyc.pl/projektanci/kontakty-p/（其中只有两个显示任何内容）

但是在尝试了你所有的建议之后，我想我会用#links 跳转到不同的 div，因为没有任何效果：/

非常感谢您的尝试和欢呼:)

Answer 1

就像完全从侧面看这个，我建议避免嵌套的怪异/复杂性，并减少问题。

将内容设置为隐藏（即<div id="replacements">...</div>）从您想要的节点中获取innerHTML，然后完成它。

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

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

通过以下方式控制它：（失去href=javascript: 并使用onClick，最好使用event handler，但为简洁起见，我将在此处将其作为onClick 属性内联，并使用按钮。）

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

我们在文档的某处有我们的目标。

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

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

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

这里是JSBin

通过使用Handlebars 或另一个不错的 JS 模板库来改进它的动态特性，但这是 OP 的练习。

edit：请注意，您还应该使用前导小写字母命名函数，并为类名称保留前导大写样式，例如var mySweetInstance = new MySpecialObject();

Answer 2

引号不匹配！因此，当您单击时，您会收到 JavaScript 错误。

浏览器看到这个字符串：

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

作为：

href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href="

将 " 内部更改为 @quot;

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

例如fiddle。

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

Answer 3

嵌套引号有问题。看看你的 DOM 检查器，看看 HTML 解析器是用它构建的！ （以this demo 为例）

您需要将属性内的引号转义为" 或"，或者将它们转换为撇号并在JS 字符串中用反斜杠转义：

<a href="j[…]r('wojewodztwo', '<a href=&quot;http://address.com&quot;>superlink</a>')">…
<a href="j[…]r('wojewodztwo', '<a href=\'http://address.com\'>superlink</a>')">…

查看工作演示 here 和 here。

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

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

甚至是javascript-registered event handler:

<li class="pl11">
    <a id="superlink">Pomorskie</a>
</li>
<script type="text/javascript">
    function replaceContentInContainer(id,content) {
        var container = document.getElementById(id);
        container.innerHTML = content;
    }
    document.getElementBId("superlink").onclick = function(event) {
        replaceContentInContainer('wojewodztwo', '<a href="http://address.com">superlink</a>');
        event.prevenDefault();
    };
</script>

(demo)