用JS实现页内动态切换DIV的内容

用JS实现页内动态切换DIV的内容

设想：无需页面跳转，仅通过当页提供的锚动态改变指定div内的内容。

思路：可利用getElementById方法加以实现。getElementById通过id属性捕获或赋值给网页特定元素的相关资讯，如innerHTML（内部的html超文本）、innerTEXT（内部的text纯文本）等。其语法结构为：document.getElementById(v).innerHTML，“v”为特定元素的id标识，用时需要小角引号将其括起来。

例如，假设有一个id标识为middle的div，我们可以通过以下JS代码获得它的内容：

str=document.getElementById('middle').innerHTML; //str将是div里的HTML代码

同样的，我们也可以通过JS改变div的内容（即赋新值给它）：

    str="Hello Javascript!";
    document.getElementById('middle').innerHTML=str;

这样，id标识为middle的div内部的内容将是“Hello Javascript!”，原来的内容（如果有）已经被刷新。

下面给出简单的代码和演示范例：

DIV内容更新测试：点击以下链接,这里的内容将被刷新!

#js学习资料