无法使用 getElementByID() 添加数据 "innerHTML" 到 <div> 标签

Question

我对 HTML< Javascript 概念还很陌生。所以请对我放轻松。我创建了 2 个标签并想使用它们的 ID onload 有选择地向每个 div 标签添加数据，但是下面的代码没有向每个 div 添加 "H1" & "h2" ] 标签。我错过了什么吗？

<html>
<head>
    <title>Titlehere</title>
    <p> Hello></p>

</head>
<body>
    <div id="tab1" onload="populatehtmlTab1()">
        <p>i1</p>
    </div>

    <div id="tab2" onload="populatehtmlTab2()">
        <p>i2</p>
    </div>

    <script type="text/javascript">
        function populatehtmlTab1() {
            document.getElementById(tab1).innerHTML = document.getElementById(tab1).innerHTML + "<p>h1</p>";
        }

        function populatehtmlTab2() {
            document.getElementById(tab2).innerHTML = document.getElementById(tab1).innerHTML + "<p>h2</p>";
        }
    </script>

</body>
</html>

Answer 1

您可以使用：

<html>
<head>
    <title>Titlehere</title>
    <p> Hello></p>

</head>
<body>
    <div id="tab1" onload="populatehtmlTab1()">
        <p>i1</p>
    </div>

    <div id="tab2" onload="populatehtmlTab2()">
        <p>i2</p>
    </div>

    <script type="text/javascript">
        function populatehtmlTab1() {
            document.getElementById(tab1).innerHTML = $('#tab1').val() + "<p>h1</p>";
        }

        function populatehtmlTab2() {
            document.getElementById(tab2).innerHTML = $('#tab1').val() + "<p>h2</p>";
        }
    </script>

</body>
</html>

Answer 2

这有一些问题。这是修改后的代码：

function populatehtmlTab1() {
   document.getElementById('tab1').innerHTML =  "<p>h1</p>";
 }

 function populatehtmlTab2() {
   document.getElementById('tab2').innerHTML =  "<p>h2</p>";
 }

function loadHtml(){
  populatehtmlTab1();
  populatehtmlTab2();
}

<html>
<head>
    <title>Titlehere</title>
    <p> Hello></p>

</head>
<body onload="loadHtml()">
    <div id="tab1" >
        <p>i1</p>
    </div>

    <div id="tab2">
        <p>i2</p>
    </div>

    <script type="text/javascript">
        
    </script>

</body>
</html>

首先元素id选择器必须是字符串：

document.getElementById('tab1')

其次你只需要直接分配 innerHTML:

document.getElementById('tab2').innerHTML =  "<p>h2</p>";

第三，你应该在主体上使用 onload，我在修改后的代码中将你的两个函数都包装到另一个函数中。

Answer 3

div 元素没有 onload 所以你的函数没有被调用。
使用insertAdjacentHTML插入
将字符串传递给 getElementById。

function populatehtmlTab1() {
  document.getElementById("tab1").insertAdjacentHTML("beforeend", "<p>h1</p>");
}

function populatehtmlTab2() {
  document.getElementById("tab2").insertAdjacentHTML("beforeend", "<p>h2</p>");
}

document.addEventListener("DOMContentLoaded", function() {
  populatehtmlTab1();
  populatehtmlTab2();
});

<div id="tab1" onload="populatehtmlTab1()">
  <p>i1</p>
</div>

<div id="tab2" onload="populatehtmlTab2()">
  <p>i2</p>
</div>

Answer 4

不好意思混了jquery

<html>
<head>
    <title>Titlehere</title>
    <p> Hello></p>

</head>
<body>
    <div id="tab1" onload="populatehtmlTab1()">
        <p>i1</p>
    </div>

    <div id="tab2" onload="populatehtmlTab2()">
        <p>i2</p>
    </div>

    <script type="text/javascript">
        function populatehtmlTab1() {
            document.getElementById(tab1).innerHTML = document.getElementById(tab1).value + "<p>h1</p>";
        }

        function populatehtmlTab2() {
            document.getElementById(tab2).innerHTML = document.getElementById(tab1).value + "<p>h2</p>";
        }
    </script>

</body>
</html>

如果在'innerHTML'中没有检测到元素'value'，可以生成变量：

var tab1Value = document.getElementById(tab1).value;

无法使用 getElementByID() 添加数据 "innerHTML" 到 <div> 标签

Unable to add data "innerHTML" to <div> tags using getElementByID()

html

javascript

jquery

innerhtml