通过appendchild添加hr为什么只能添加一个？
如题，通过bigdiv.appendChild(hr)来添加，我想要的效果是每个类名为qujian的下面都增加一个hr标签<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#bigdiv{
}
.qujian{
width: 300px;
margin: 50px 40%;
}
.qujian div{
width: 50px;
background-color: pink;
display: inline-block;
margin-right: 50px;
text-align: center;
line-height: 120%;
}
</style>
</head>
<body>
<button onclick="creatbiao()">创建柱形图</button>
<div id="bigdiv">
<div class="qujian"></div>
</div>
<script>
var xiabiao = 1//id下标
const hr = document.createElement("hr")
function creatbiao(){
const bigdiv = document.getElementById("bigdiv")
var qujian = document.getElementsByClassName("qujian")
var jidu = prompt("输入季度数") * 1
qujian.style.width = `${jidu * 100}px`
let bili = Math.floor(50/jidu)
qujian.style.margin = `50px ${bili}%`
for(let i = 1;i<=jidu;i++){
console.log(xiabiao)
let div = document.createElement("div")
let id = document.createAttribute("id")
id.value = `numb${xiabiao}`
qujian.appendChild(div)
div.setAttribute('id',id.value)
document.getElementById(`numb${xiabiao}`).style.height = prompt(`输入第${i}季度的数据`) + "px"
document.getElementById(`numb${xiabiao}`).innerHTML = (document.getElementById(`numb${xiabiao}`).style.height).slice(0,-2)
xiabiao++
}
//创建新区间
let divbig = document.createElement("div")
divbig.setAttribute("class","qujian")
bigdiv.appendChild(hr)
bigdiv.appendChild(divbig)
}
</script>
</body>
</html> 问题出在你对`getElementsByClassName`的理解上。`getElementsByClassName`返回的是一个HTMLCollection对象，而不是一个单独的元素。所以当你尝试给它设置样式时，会报错。
解决办法是遍历`qujian`，对每个元素分别添加`hr`。
修改代码如下：
<div id="bigdiv">
<div class="qujian">
<div></div>
</div>
<div class="qujian">
<div></div>
</div>
<div class="qujian">
<div></div>
</div>
</div>
<script>
const bigdiv = document.getElementById("bigdiv")
const qujian = document.getElementsByClassName("qujian")
for(let i = 0; i < qujian.length; i++) {
const hr = document.createElement("hr")
qujian.appendChild(hr)
}
</script>
这样就能为每个类名为`qujian`的元素下添加一个`hr`标签了。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-1-19 14:29
问题出在你对`getElementsByClassName`的理解上。`getElementsByClassName`返回的是一个HTMLCollection对象 ...
这样子会重复添加，而且分割符的长度我需要是和页面一样长，即不受qujian宽度的影响 Sorawithcat 发表于 2024-01-19 14:33
这样子会重复添加，而且分割符的长度我需要是和页面一 ...
抱歉，我理解错了你的问题。要实现每个类名为`qujian`的元素下面都添加一个长度与页面一样长的分割线，可以按以下方式修改代码：
const bigdiv = document.getElementById("bigdiv");
const qujian = document.getElementsByClassName("qujian");
for (let i = 0; i < qujian.length; i++) {
const hr = document.createElement("hr");
hr.style.width = "100%"; // 设置分割线宽度为页面宽度
qujian.appendChild(hr);
}
在这个代码中，我们为每个类名为`qujian`的元素创建一个`hr`标签，并设置其宽度为100%以确保与页面宽度一致。然后使用`appendChild`将该`hr`标签添加到相应的`qujian`元素下。这样就实现了每个元素下都有一个与页面宽度一致的分割线。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-1-19 14:34
抱歉，我理解错了你的问题。要实现每个类名为`qujian`的元素下面都添加一个长度与页面一样长的分割线， ...
并没有作用，以及分隔符会重复添加，比如说当添加两次时，第一个qujian下会有两个分隔符 Sorawithcat 发表于 2024-01-19 14:37
并没有作用，以及分隔符会重复添加，比如说当添加两次 ...
非常抱歉，之前给出的代码有误。要实现每个类名为`qujian`的元素下面都添加一个长度与页面一样长的分割线，可以按以下方式修改代码：bigdiv = document.getElementById("bigdiv");const qujian = document.getElementsByClassName("qujian");for (let i = 0; i < qujian.length; i++) {const hr = document.createElement("hr");hr.style.width = "100%"; // 设置分割线宽度为页面宽度qujian.appendChild(hr);}在这个代码中，我们使用`qujian`来访问每个类名为`qujian`的元素，然后将`hr`分割线添加到相应的元素下。这样就可以确保每个元素只会添加一个分割线，并且分割线的宽度与页面宽度一致。请尝试一下这个修改后的代码，看看是否达到了你想要的效果。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-1-19 14:37
非常抱歉，之前给出的代码有误。要实现每个类名为`qujian`的元素下面都添加一个长度与页面一样长的分割 ...
还是有同样的问题 FishC 发表于 2024-1-19 14:37
非常抱歉，之前给出的代码有误。要实现每个类名为`qujian`的元素下面都添加一个长度与页面一样长的分割 ...
而且我希望的是hr和qujian同级，hr不是qujian的子节点 Sorawithcat 发表于 2024-01-19 14:40
还是有同样的问题
非常抱歉之前的回答仍然有误。问题出在了`qujian.appendChild(hr)`这行代码上。由于`getElementsByClassName`返回的是一个HTMLCollection对象，它没有直接的`appendChild`方法。正确的做法是要通过索引访问每个元素，并为每个元素添加分割线。修改代码如下：
const bigdiv = document.getElementById("bigdiv");
const qujian = document.getElementsByClassName("qujian");
for (let i = 0; i < qujian.length; i++) {
const hr = document.createElement("hr");
qujian.appendChild(hr);
}
这样就能为每个类名为`qujian`的元素下添加一个分割线了。请尝试一下这个修改后的代码，看看是否解决了问题。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-1-19 14:43
非常抱歉之前的回答仍然有误。问题出在了`qujian.appendChild(hr)`这行代码上。由于`getElementsByClas ...
而且我希望的是hr和qujian同级，hr不是qujian的子节点 Sorawithcat 发表于 2024-01-19 14:42
而且我希望的是hr和qujian同级，hr不是qujian的子节点
非常抱歉之前的回答有误。如果你希望`hr`和`qujian`元素是同级关系，你可以通过在`qujian`元素后面插入`hr`元素来实现。以下是修改后的代码示例：qujian = document.querySelectorAll('.qujian');for (let i = 0; i < qujian.length; i++) { const hr = document.createElement('hr'); // 在当前qujian元素后面插入hr元素 qujian.parentNode.insertBefore(hr, qujian.nextSibling);}在这个代码中，我们使用`querySelectorAll`获取所有类名为`qujian`的元素，然后使用`insertBefore`方法将`hr`元素插入到每个`qujian`元素的后面。这样就可以保证`hr`和`qujian`是同级关系，而不是`qujian`的子节点。请尝试一下这个修改后的代码，看看是否达到了你想要的效果。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 Sorawithcat 发表于 2024-01-19 14:43
而且我希望的是hr和qujian同级，hr不是qujian的子节点
非常抱歉之前的回答仍然有误。确保hr和qujian同级的方法是将hr添加到qujian元素的父节点中，而不是直接作为qujian的子节点。我们可以通过遍历每个qujian元素，获取它们的父节点，然后将hr作为兄弟节点插入到父节点中。修改代码如下：
const qujianList = document.getElementsByClassName("qujian");
for (let i = 0; i < qujianList.length; i++) {
const qujian = qujianList;
const hr = document.createElement("hr");
qujian.parentNode.insertBefore(hr, qujian.nextSibling);
}
这样就能为每个类名为`qujian`的元素之后插入一个分割线元素hr了。请尝试一下这个修改后的代码，看看是否解决了问题。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-1-19 14:44
非常抱歉之前的回答仍然有误。确保hr和qujian同级的方法是将hr添加到qujian元素的父节点中，而不是直接 ...
加是加了，但是会有重复添加的问题，比如添加两次会导致第一个qujian下面有两个hr Sorawithcat 发表于 2024-01-19 14:48
加是加了，但是会有重复添加的问题，比如添加两次会导 ...
非常抱歉之前的回答仍然有误。你需要在插入`hr`元素之前先判断是否已经存在，以避免重复添加。修改代码如下：const qujianList = document.getElementsByClassName("qujian");for (let i = 0; i < qujianList.length; i++) { const qujian = qujianList; const hrExists = qujian.nextElementSibling && qujian.nextElementSibling.tagName === 'HR'; if (!hrExists) { const hr = document.createElement("hr"); qujian.parentNode.insertBefore(hr, qujian.nextSibling); }}这样就能确保每个类名为`qujian`的元素之后只会添加一个分割线元素hr了。请尝试一下这个修改后的代码，看看是否解决了重复添加的问题。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-1-19 14:48
非常抱歉之前的回答仍然有误。你需要在插入`hr`元素之前先判断是否已经存在，以避免重复添加。修改代码 ...
这次甚至没有分割线了 Sorawithcat 发表于 2024-01-19 14:51
这次甚至没有分割线了
非常抱歉再次给出错误的答案。在我的回答中，代码逻辑有误，并且没有考虑到正确的插入位置。正确的做法是使用`insertAdjacentElement()`方法，通过在当前元素之后插入一个新的`hr`元素。以下是修改后的代码：const qujianList = document.getElementsByClassName("qujian");for (let i = 0; i < qujianList.length; i++) { const qujian = qujianList; const hrExists = qujian.nextElementSibling && qujian.nextElementSibling.tagName === 'HR'; if (!hrExists) { const hr = document.createElement("hr"); qujian.insertAdjacentElement('afterend', hr); }}这样就能为每个类名为`qujian`的元素之后添加一个分割线元素`hr`，并且避免了重复添加的问题。请尝试一下这个修改后的代码，看看是否解决了问题。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-1-19 14:52
非常抱歉再次给出错误的答案。在我的回答中，代码逻辑有误，并且没有考虑到正确的插入位置。正确的做法 ...
qujian.insertAdjacentElement is not a function。报错文本 Sorawithcat 发表于 2024-01-19 14:53
qujian.insertAdjacentElement is not a function。报 ...
非常抱歉，我给出了错误的答案。实际上，`insertAdjacentElement()`是一个HTML元素对象的方法，并不适用于HTMLCollection对象。对于HTMLCollection对象，我们需要遍历每个元素并分别添加`hr`元素。
以下是修改后的代码：
const qujianList = document.getElementsByClassName("qujian");
for (let i = 0; i < qujianList.length; i++) {
const qujian = qujianList;
const hrExists = qujian.nextElementSibling && qujian.nextElementSibling.tagName === 'HR';
if (!hrExists) {
const hr = document.createElement("hr");
qujian.parentNode.insertBefore(hr, qujian.nextSibling);
}
}
这段代码会为每个类名为`qujian`的元素后面插入一个分割线元素`hr`。请尝试一下这个修改后的代码，并且看看是否解决了问题。对于每个`qujian`元素，我们检查它的下一个兄弟节点是否已经是一个`hr`元素，如果不是，则通过`insertBefore()`方法在该兄弟节点之前插入新的`hr`元素。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
页:
[1]