使用javascript更新div的内容

Question

我试图在导航栏中的不同项目点击更新maint div内容时尝试更新单个div的内容,而不是尝试在我的网站上创建大量不同的页面.我试图用Javascript找到一个简单的例子:

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


          <div id="example1div" style="border-style:solid; padding:10px; text-align:center;">
            I will be replaced when you click.
        </div>
        <a href="javascript:ReplaceContentInContainer('example1div', '<img src='2.jpg'>' )">
            Click me to replace the content in the container.
        </a>

当我只尝试更新文本时这很好用,但是当我在那里放一个img标签时,正如你所看到的,它停止工作.

要么1)我试图这样做的问题是什么？或2)有什么更好/更容易的方法呢？

我不是坚持使用Javascript.jQuery也可以工作,只要它简单或容易.我想创建一个函数,让我传入任何我想要更新的HTML并将其插入div标签并取出"旧"HTML.

Answer 1

你只是有一些逃避问题:

ReplaceContentInContainer('example1div', '<img src='2.jpg'>')
                                                   ^     ^

内部'需要被转义,否则JS引擎会看到ReplaceContentInContainer('example1div', '<img src='加上后续产生的一些语法错误2.jpg'>').将调用更改为(帽子的尖端到cHao'关于转义<和>HTML中的答案):

ReplaceContentInContainer('example1div', '<img src=\'2.jpg\'>')

使用jQuery执行此操作的一种简单方法是在链接中添加ID(例如"idOfA"),然后使用该html()函数(这比使用更加跨平台innerHTML):

<script type="text/javascript">
    $('#idOfA').click(function() {
        $('#example1div').html('<img src="2.jpg">');
    });
</script>