在HTML / JavaScript中，如何动态设置标题/段落元素的文本而不覆盖其他任何内容？

Question

当您搜索如何动态设置段落或标题元素的文本时，您会遇到几乎相同的代码行：

document.getElementById("header").innerHTML = "some text";

但这并不完全正确。 请看以下示例：

<html>
    <head />
    <body>
        <h1 id="header" />
        <p id="p1" />
        <script type="text/javascript">
            document.getElementById("header").innerHTML = "header";
            document.getElementById("p1").innerHTML = "p1";
        </script>
    </body>
</html>

第一个JavaScript行几乎从页面中删除了p1 ，即使p1和header在原始HTML中没有任何关系。 在try ... catch块中包装第二个JavaScript行时，捕获的错误是：

document.getElementById(...) is null

使用textContent而不是innerHTML时存在同样的问题。 我有点惊讶的是，每个人都说这是你应该如何更改元素的文本，当它真的不适合这个目的时。 设置它的正确方法是什么？

Answer 1

p和h1不是“空元素”，这意味着它们不会在打开它们的同一个标签中关闭（如img和br ）。 如果你这样写它们，它们就不是有效的标签，浏览器会忽略它们（这就是为什么document.getElementById找不到它们）。 试试这个：

<html>
    <head></head>
    <body>
        <h1 id="header"></h1>
        <p id="p1"></p>
        <script type="text/javascript">
            document.getElementById("header").innerHTML = "header";
            document.getElementById("p1").innerHTML = "p1";
        </script>
    </body>
</html>

Answer 2

将您的HTML更改为：

 <h1 id="header"></h1>
 <p id="p1"> </p>

现在尝试使用JavaScript代码，因为它们不是空元素。

Answer 3

我认为你遇到的主要问题是设置结束标签的方式如下： <h1 id="header"/> with /而不是结束语句。 这是不正确的，你需要像这样关闭它： <h1 id="header"></h1> <p>标签和许多其他标签也是如此。 您可以在此处找到此规则的一些例外情况：

http://www.w3schools.com/html/html_elements.asp

这是一个实际结果的例子！

http://jsfiddle.net/nd3Dq/

在HTML / JavaScript中，如何动态设置标题/段落元素的文本而不覆盖其他任何内容？

问题描述

3 个解决方案

解决方案1
8 已采纳

解决方案2
2 2014-06-02 02:04:56

解决方案3
2 2014-06-02 02:05:45

在HTML / JavaScript中，如何动态设置标题/段落元素的文本而不覆盖其他任何内容？

问题描述

3 个解决方案

解决方案1 8 已采纳

解决方案2 2 2014-06-02 02:04:56

解决方案3 2 2014-06-02 02:05:45

解决方案1
8 已采纳

解决方案2
2 2014-06-02 02:04:56

解决方案3
2 2014-06-02 02:05:45