gpt4 book ai didi

javascript - html 节点没有被附加

转载 作者:行者123 更新时间:2023-11-28 15:21:17 25 4
gpt4 key购买 nike

在下面的程序中,我尝试在 html 文档中的父节点中添加和删除子节点。

我正在尝试这样做:

单击Node 1按钮后,检查父节点是否有子节点node2。如果是,则从父级中删除 node2 子级。然后附加node1

如果 node2 已经作为子节点存在,我的程序可以正常工作。但是,如果 node2 还不是 child,则 node1 根本不会被附加。我哪里出错了?

下面是代码:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>practice</title>
</head>
<body>
<div>
<h3>Nodes ...</h3>
<br/><br/>
<button type="button" onclick="func_node1()">Node 1</button>
<button type="button" onclick="func_node2()">Node 2</button>
<br/><hr/>
<div id="display">
<p id="p1"></p>
</div>
</div>
<script>
/*Create two nodes 'node1' and 'node2' with some text in them*/
var node1 = document.createElement("p");
var node1_text = document.createTextNode("ONE 1 NODE");
node1.appendChild(node1_text);

var node2 = document.createElement("p");
var node2_text = document.createTextNode("TWO 2 NODE");
node2.appendChild(node2_text);
/*Issue in this function*/
function func_node1()
{
var parent = document.getElementById("display");
var children = parent.childNodes;
var i;
for(i=0; i<children.length; i++)
{
if(children.item(i).id == 'node2');
{
parent.removeChild(node2);
break;
}
}
parent = document.getElementById("display");
parent.appendChild(node1);
//document.write("CLEAR");
}
function func_node2()
{
var parent = document.getElementById("display");
parent.appendChild(node2);
}
</script>
</body>

重现问题的步骤:

  1. 打开 html 页面,然后单击Node 1 按钮。

最佳答案

这一行有一个分号

if (children[i].id == 'node2'); 
{
...
}

无论 node2 是否存在,这都将始终执行代码,但如果删除它,则代码将不会执行,因为 node2 没有 id。

您需要像这样设置id

node2.id = 'node2';
<小时/>

此行中还有一个错误,因为您没有引用已附加的元素。

parent.removeChild(node2);

它应该看起来像这样

parent.removeChild(children[i]);
<小时/>

此外,您可以在多个位置定义它。

var parent = document.getElementById("display");

由于父级似乎没有改变,您可以在脚本的开头定义它,并避免在不必要时查询 DOM。

/*Create two nodes 'node1' and 'node2' with some text in them*/
var parent = document.getElementById("display");

var node1 = document.createElement("p");
var node1_text = document.createTextNode("ONE 1 NODE");
node1.id = 'node1';
node1.appendChild(node1_text);

var node2 = document.createElement("p");
var node2_text = document.createTextNode("TWO 2 NODE");
node2.id = 'node2';
node2.appendChild(node2_text);
/*Issue in this function*/
function func_node1() {
var children = parent.childNodes, i;
for (i = 0; i < children.length; i++) {
if (children[i].id == 'node2') {
parent.removeChild(children[i]);
break;
}
}
parent.appendChild(node1);
}

function func_node2() {
parent.appendChild(node2);
}
<div>
<h3>Nodes ...</h3>
<br/><br/>
<button type="button" onclick="func_node1()">Node 1</button>
<button type="button" onclick="func_node2()">Node 2</button>
<br/><hr/>
<div id="display">
<p id="p1"></p>
</div>
</div>

关于javascript - html 节点没有被附加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31308227/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com