html javascript更改内容

嘿，伙计们，我正试图用javascript更改div的内容，以达到教育目的，帮助某人完成一个大学项目。这就是我目前得到的-

<div id="navbar">
  ...
  <ul>
    <li> <text onclick="getWordProcessing()"> Word Processing</text></li>
  </ul>
  ...
</div>

<div id="content"/>
  <script type="text/javascript">
    function getWordProcessing(){
      document.getElementById("content").textContent=
         "--something for word processing--";
    }
  </script>

单击列表中的文本时，content div会像Id expect一样更改，但会立即变回空状态，就像页面被刷新一样。为什么？这是非常令人沮丧的

谢谢你抽出时间

上述问题已经解决，但我在这里发现了一些其他问题-

当链接不起作用时，使用文本会像预期的那样起作用。

尝试以下操作：

function getWordProcessing(){
            document.getElementById("content").innerHTML=
            "--something for word processing--";
}

---

你可以检查我刚才做的这个JSFIDLE，它可以工作。刚才声明了函数。问题是在调用函数getWordProcessing之前必须定义它

---

首先，您必须修复HTML，而不是put

然后用innerHTML替换innerText

---

当您从javascript中更改html元素（如DIV）的内容时，刷新页面后其内容将不会保持不变，这是正常的。但您可以使用输入控件（如文本框）来保留值，即使在刷新后也是如此。我对此进行了测试，效果良好：

<div id="navbar">
    ...
    <ul>
    <li> <text onclick="getWordProcessing()"> Word Processing</text></li>
    </ul>
    ...
</div>

<input type="text" id="content" readonly="readonly" style="border:none; width:100%;" />

<script type="text/javascript">
function getWordProcessing()
{
        document.getElementById("content").value = "--something for word processing--";
}
</script>

文本框边框设置为“无”，并且是只读的，与普通文本内容类似。

---

如果需要多行消息，则必须使用textarea元素而不是input type=text作为内容占位符。

。结果是相同的。@user121987请尝试不使用自动关闭的div-tag。因为innerHTML是正确的属性，而且没有标记，您不能像您那样关闭div。因此，请使用而不是。现代浏览器不会将其识别为已关闭。@TsanyoTsanev也是有效的。如果它是纯文本，没有被更改的标记，那么就没有必要使用innerHTML。实际上是不鼓励这样做的。只是做了。现在在Firefox中点击文本完全没有效果，在Opera中与原始版本没有区别，在IE中打开站点的根本地目录。用innerHTML试试吧！innerText适用于9之前的Internet explorer版本。其他浏览器和9版IE使用文本内容。你是对的。然而，文字处理为什么会有永久性的效果，比如我想象它能工作，同时瞬间更改div并将其更改回来？@user1219387您希望文本只保留一小会儿，然后返回到您的旧文本？@user1219387与您的用户一起，您实际上是在创建指向当前页面的相对链接href=。由于您没有阻止单击处理程序中的默认操作，浏览器会将您重定向到当前页面。不，我正在尝试永久更改它。不过，我明白你的意思。谢谢你测试过这个吗？还好吗，还是你有什么问题？

<script>
    function getWordProcessing(){
        document.getElementById("content").innerHTML = "--something for word processing--";
    }
</script>
<div id="navbar">
    <ul>
        <li>
            <text onclick="getWordProcessing()"> Word Processing</text>
        </li>
    </ul>
</div>
<div id="content"></div>

<div id="navbar">
    ...
    <ul>
    <li> <text onclick="getWordProcessing()"> Word Processing</text></li>
    </ul>
    ...
</div>

<input type="text" id="content" readonly="readonly" style="border:none; width:100%;" />

<script type="text/javascript">
function getWordProcessing()
{
        document.getElementById("content").value = "--something for word processing--";
}
</script>