用另一个内容替换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"更改为"superlink".

纯文本工作正常,但我需要链接.

这是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,更好地作为事件处理程序,但为了简洁起见,我将其作为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的练习.

编辑:注意,您还应该使用前导小写字母命名函数,并为类名保留主要的大写样式,例如 var mySweetInstance = new MySpecialObject();