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

replace content of div with another content

提问by John Alabama

I've been building a list of links, all of which should change the content of a div to another specific content (about 4 lines of stuff: name, website, contact etc.) upon a click.

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

I found this code:

我找到了这个代码：

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

and used it in such a way:

并以这种方式使用它：

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

And it doesn't work as I expected.

它不像我预期的那样工作。

It changes hyperlinks text from 'Pomorskie' to 'superlink'.

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

The plain text works just fine but I need links.

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

here's the http://xn--pytyfundamentowe-jyc.pl/projektanci/kontakty-p/(only two of them show anything)

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

But after trying all of your recomendations, I think I'd jump to different divs with #links, cause nothing worked with this :/

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

Thanks a lot for trying, and cheers :)

非常感谢您的尝试，并干杯:)

采纳答案by ocodo

Just as a completely sideways look at this, I'd suggest avoiding the nesting weirdness / complexity, and reducing the problem down.

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

Setup the content in a hidden (ie. <div id="replacements">...</div>) Grab the innerHTMLfrom the node you want, and be done with it.

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

Much easier to get replacement content from non-devs that way too, kinda works great if you're in a team.

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

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

Control it with: (lose that href=javascript:and use onClick, better as an event handler, but for brevity I'll inline it as an onClick attribute here, and use a button.)

控制它：（失去它href=javascript:并使用 onClick，更好地作为事件处理程序，但为了简洁起见，我将在此处将其内联为 onClick 属性，并使用按钮。）

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

We have our target somewhere in the document.

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

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

Then the replacement content sits hidden inside a replacements div.

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

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

Here it is in JSBin

这是在JSBin

Improve the dynamic nature of this by using Handlebarsor another nice JS templating library, but that's an exercise for the OP.

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

edit: Note, you should also name functions with a leading lowercase letter, and reserve the leading uppercase style for Class names e.g. var mySweetInstance = new MySpecialObject();

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

回答by epascarello

The quotes are mismatched! So when you click you are getting a JavaScript error.

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

The browser sees this string:

浏览器看到这个字符串：

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

as:

作为：

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

Chnage the " inside to @quot;

将“内部更改为 @quot;

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

Example fiddle.

示例小提琴。

Also note, using the href tag for JavaScript is a BAD practice.

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

回答by Bergi

You've got a problem with nested quotes. Take a look in your DOM inspector to see what the HTML parser built from it! (in this demo, for example)

您遇到了嵌套引号的问题。看看你的 DOM 检查器，看看 HTML 解析器是用它构建的！（例如在这个演示中）

You either need to HTML-escape the quotes inside the attribute as "or ", or convert them to apostrophes and escape them inside the JS string with backslashes:

您需要将属性内的引号转义为 HTML"或"，或者将它们转换为撇号并使用反斜杠将它们转义到 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>')">…

See working demos hereand here.

在此处和此处查看工作演示。

Better, you should use a onclickattribute instead of a javascript-pseudo-url:

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

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

or even a javascript-registered event handler:

甚至是javascript 注册的事件处理程序：

<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)

（演示）