无法使用 getElementByID() 将数据“innerHTML”添加到 <div> 标签答案

【问题标题】：Unable to add data "innerHTML" to <div> tags using getElementByID()无法使用 getElementByID() 将数据“innerHTML”添加到 <div> 标签
【发布时间】：2017-08-17 14:44:57
【问题描述】：

我对 HTML

<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>

【问题讨论】：

getElementById(tab1) => getElementById('tab1') 选择器必须是字符串
@MysterX：这不是选择器，而是 ID。但是，是的，这就是问题所在。以错字/非重复投票结束。
您可能想知道为什么没有收到错误消息。原因是当你给元素id 值时，浏览器会为它们创建自动全局变量，所以tab1 不是未知标识符，它是一个引用元素实例的全局变量。如果您将该元素实例传递给getElementById，它将被转换为字符串，然后将该字符串用作要查找的ID。并且不会被发现。 :-)（那么为什么不使用自动全局变量？浏览器的全局范围内有太多冲突。最好使用getElementById 故意检索它们。）
你可以简化一下：document.getElementById('tab2').innerHTML += "<p>h2</p>";
@OmSao：“参数化”不是正确的词。如果您的意思是“将它们放在引号中”，那么实际上没有比“将它们放在引号中”更短的表达方式了。 :-)

标签： javascript jquery html innerhtml

【解决方案1】：

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

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，我在修改后的代码中将你的两个函数包装到另一个函数中。

【讨论】：

【解决方案2】：

你可以使用：

<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>

【讨论】：

不要将 javascript 与 jquery 混合使用
函数 populatehtmlTab1() { document.getElementById(tab1).innerHTML = document.getElementById(tab1).value + "
h1
"; } 函数 populatehtmlTab2() { document.getElementById(tab2).innerHTML = document.getElementById(tab1).value + "
h2
"; }

【解决方案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>

【讨论】：

insertAdjacentHTML() 是不是 innerHTML 的替代品？第一个参数中的“beforeend”字符串是什么？并且 addEventListener() 是替代 toonload() 吗？
@codeLover：在很多情况下，是的。它从您提供的 HTML 中添加新内容，首先销毁并重新创建现有的 DOM。按照您的操作方式，它必须获取当前元素，从它们生成 HTML，将该 HTML 添加到新 HTML，销毁旧元素，最后从更大的新 HTML 字符串创建新元素。这工作量太大，在某些情况下可能会导致错误。使用+=也有同样的问题。
"beforeend" 是四个位置参数之一。它们与调用它的元素相关。参数是 "beforebegin"、"afterbegin"、"beforeend" 和 "afterend"。这些是相对于开始或结束标签的，因此它们在元素之前、第一个位置内部、最后一个位置内部或元素之后插入。
addEventListener 是一种绑定事件处理程序的现代方法，DOMContentLoaded 事件在 document 已加载但在其他内容（如图像）加载之前调用。如果您也需要等待图像，请使用"load" 而不是"DOMContentLoaded"。

【解决方案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;

【讨论】：