[已解决]通过appendchild添加hr为什么只能添加一个？

Sorawithcat · 发表于 2024-1-19 14:27:38

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

如题，通过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[qujian.length-1].style.width = `${jidu * 100}px`
                                let bili = Math.floor(50/jidu)
                                qujian[qujian.length-1].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[qujian.length-1].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>

最佳答案

月排行榜 / 总排行榜

FishC

2024-1-19 14:54:41

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[i];
    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 小助理，如未能正确解答您的问题，请继续追问。

跳转到最佳答案楼层

FishC · 发表于 2024-1-19 14:29:11

问题出在你对`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[i].appendChild(hr)
    }
</script>

这样就能为每个类名为`qujian`的元素下添加一个`hr`标签了。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

Sorawithcat · 发表于 2024-1-19 14:33:51

FishC 发表于 2024-1-19 14:29
问题出在你对`getElementsByClassName`的理解上。`getElementsByClassName`返回的是一个HTMLCollection对象 ...

这样子会重复添加，而且分割符的长度我需要是和页面一样长，即不受qujian宽度的影响

FishC · 发表于 2024-1-19 14:34:24

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[i].appendChild(hr);
}

在这个代码中，我们为每个类名为`qujian`的元素创建一个`hr`标签，并设置其宽度为100%以确保与页面宽度一致。然后使用`appendChild`将该`hr`标签添加到相应的`qujian`元素下。这样就实现了每个元素下都有一个与页面宽度一致的分割线。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

Sorawithcat · 发表于 2024-1-19 14:37:00

FishC 发表于 2024-1-19 14:34
抱歉，我理解错了你的问题。要实现每个类名为`qujian`的元素下面都添加一个长度与页面一样长的分割线， ...

并没有作用，以及分隔符会重复添加，比如说当添加两次时，第一个qujian下会有两个分隔符

FishC · 发表于 2024-1-19 14:37:46

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[i].appendChild(hr);}

在这个代码中，我们使用`qujian[i]`来访问每个类名为`qujian`的元素，然后将`hr`分割线添加到相应的元素下。这样就可以确保每个元素只会添加一个分割线，并且分割线的宽度与页面宽度一致。请尝试一下这个修改后的代码，看看是否达到了你想要的效果。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

Sorawithcat · 发表于 2024-1-19 14:40:54

FishC 发表于 2024-1-19 14:37
非常抱歉，之前给出的代码有误。要实现每个类名为`qujian`的元素下面都添加一个长度与页面一样长的分割 ...

还是有同样的问题

Sorawithcat · 发表于 2024-1-19 14:42:34

FishC 发表于 2024-1-19 14:37
非常抱歉，之前给出的代码有误。要实现每个类名为`qujian`的元素下面都添加一个长度与页面一样长的分割 ...

而且我希望的是hr和qujian同级，hr不是qujian的子节点

FishC · 发表于 2024-1-19 14:43:17

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[i].appendChild(hr);
}

这样就能为每个类名为`qujian`的元素下添加一个分割线了。请尝试一下这个修改后的代码，看看是否解决了问题。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

Sorawithcat · 发表于 2024-1-19 14:43:57

FishC 发表于 2024-1-19 14:43
非常抱歉之前的回答仍然有误。问题出在了`qujian.appendChild(hr)`这行代码上。由于`getElementsByClas ...

而且我希望的是hr和qujian同级，hr不是qujian的子节点

FishC · 发表于 2024-1-19 14:44:16

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[i].parentNode.insertBefore(hr, qujian[i].nextSibling);}

在这个代码中，我们使用`querySelectorAll`获取所有类名为`qujian`的元素，然后使用`insertBefore`方法将`hr`元素插入到每个`qujian`元素的后面。这样就可以保证`hr`和`qujian`是同级关系，而不是`qujian`的子节点。请尝试一下这个修改后的代码，看看是否达到了你想要的效果。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

FishC · 发表于 2024-1-19 14:44:47

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[i];
    const hr = document.createElement("hr");
    qujian.parentNode.insertBefore(hr, qujian.nextSibling);
}

这样就能为每个类名为`qujian`的元素之后插入一个分割线元素hr了。请尝试一下这个修改后的代码，看看是否解决了问题。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

Sorawithcat · 发表于 2024-1-19 14:48:04

FishC 发表于 2024-1-19 14:44
非常抱歉之前的回答仍然有误。确保hr和qujian同级的方法是将hr添加到qujian元素的父节点中，而不是直接 ...

加是加了，但是会有重复添加的问题，比如添加两次会导致第一个qujian下面有两个hr

FishC · 发表于 2024-1-19 14:48:48

Sorawithcat 发表于 2024-01-19 14:48
加是加了，但是会有重复添加的问题，比如添加两次会导 ...

非常抱歉之前的回答仍然有误。你需要在插入`hr`元素之前先判断是否已经存在，以避免重复添加。修改代码如下：const qujianList = document.getElementsByClassName("qujian");for (let i = 0; i < qujianList.length; i++) { const qujian = qujianList[i]; 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 小助理，如未能正确解答您的问题，请继续追问。

Sorawithcat · 发表于 2024-1-19 14:51:37

FishC 发表于 2024-1-19 14:48
非常抱歉之前的回答仍然有误。你需要在插入`hr`元素之前先判断是否已经存在，以避免重复添加。修改代码 ...

这次甚至没有分割线了

FishC · 发表于 2024-1-19 14:52:07

Sorawithcat 发表于 2024-01-19 14:51
这次甚至没有分割线了

非常抱歉再次给出错误的答案。在我的回答中，代码逻辑有误，并且没有考虑到正确的插入位置。正确的做法是使用`insertAdjacentElement()`方法，通过在当前元素之后插入一个新的`hr`元素。以下是修改后的代码：const qujianList = document.getElementsByClassName("qujian");for (let i = 0; i < qujianList.length; i++) { const qujian = qujianList[i]; const hrExists = qujian.nextElementSibling && qujian.nextElementSibling.tagName === 'HR'; if (!hrExists) { const hr = document.createElement("hr"); qujian.insertAdjacentElement('afterend', hr); }}这样就能为每个类名为`qujian`的元素之后添加一个分割线元素`hr`，并且避免了重复添加的问题。请尝试一下这个修改后的代码，看看是否解决了问题。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

Sorawithcat · 发表于 2024-1-19 14:53:55

FishC 发表于 2024-1-19 14:52
非常抱歉再次给出错误的答案。在我的回答中，代码逻辑有误，并且没有考虑到正确的插入位置。正确的做法 ...

qujian.insertAdjacentElement is not a function。报错文本

FishC · 发表于 2024-1-19 14:54:41

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[i];
    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 小助理，如未能正确解答您的问题，请继续追问。

账号		自动登录	找回密码
密码			立即注册