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

标记。

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

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

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

其次，您只需要直接分配内部 HTML：

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

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

您可以使用：

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

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>

抱歉混淆了 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;

相关内容

最新更新

热门标签：