个人中心
gpt4 book ai didi

javascript - 删除 Javascript DOM 中的子项，控制台结果与页内结果不同

转载 作者：行者123 更新时间：2023-11-30 16:27:22 25 4
gpt4 key购买 nike

我试图从一个简单的网页中动态删除所有(动态添加的)子项，我发现当我单击我的按钮以运行网页中的 JavaScript 代码时，所产生的删除与运行浏览器控制台中的相同代码。

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="js/main.js"></script>
    </head>

    <body onclick="addText()">
        <h1 id="my_text">Click on the page.</h1>
        <button onclick="deleteText()">Click here to remove text node</button>
    </body>
</html>

JavaScript:

function addText() {
    newText = document.createTextNode("This is dynamically added text");
    newText.id = "dynamicText";

    var textPart = document.getElementById("my_text");
    textPart.appendChild(newText);
}

function deleteText() {
    var parent = document.getElementById("my_text");

    while (parent.childNodes[1]) {
        parent.removeChild(parent.childNodes[1]);
    }
}

在浏览器中，我单击标题以将文本节点动态附加到标题。然后我希望单击按钮删除所有动态添加的文本。当我单击浏览器中的按钮时，它会删除除一个 newText 元素之外的所有动态添加的文本，结果如​​下:

Click on the page.This is dynamically added text

但是，当我在浏览器控制台中执行相同的代码(或者甚至只是调用函数 deleteText() )时，它会根据需要删除所有 newText 元素，结果如下:

Click on the page.

我想知道，为什么从浏览器窗口和浏览器控制台执行代码的结果不同？我使用的是 Chrome 版本 46.0.2490.86 m

最佳答案

这是因为当您单击“删除”按钮时，您仍在单击 body 标记，因此 <body> 中的 onclick标签仍然被触发再次添加文本节点。

关于javascript - 删除 Javascript DOM 中的子项，控制台结果与页内结果不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33906728/

25 4 0
文章推荐： javascript - 用于非异步的 Node JS
文章推荐： javascript - 获取 Indexeddb 中未保存记录的数量
文章推荐： javascript - 迭代 meteorjs 中嵌套的每个语句(按类别分组)
文章推荐： javascript - d3js 防止拖拽点击事件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com