在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