html 节点没有被追加
html node is not getting appended
在下面的程序中,我试图在 html 文档中添加和删除子节点 to/from 父节点。
我正在尝试这样做:
单击 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>
重现问题的步骤:
- 打开html页面,然后点击
Node 1
按钮。
这是行不通的,因为节点 2 是新创建的元素,在您将其附加到父节点之前,它不是 DOM 的一部分。
这就是为什么它给你一个错误说
Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The
node to be removed is not a child of this node.
下面我们来解决一下。
- 在删除之前检查天气元素是否存在。并将其删除。
与其使用 removeChild(node) ,不如使用
removeChild(document.getElementById("correspondingId"))
以便将其从 DOM 中删除。
希望解决方案有所帮助。
你在这一行中有一个分号
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>
在下面的程序中,我试图在 html 文档中添加和删除子节点 to/from 父节点。
我正在尝试这样做:
单击 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>
重现问题的步骤:
- 打开html页面,然后点击
Node 1
按钮。
这是行不通的,因为节点 2 是新创建的元素,在您将其附加到父节点之前,它不是 DOM 的一部分。 这就是为什么它给你一个错误说
Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
下面我们来解决一下。
- 在删除之前检查天气元素是否存在。并将其删除。 与其使用 removeChild(node) ,不如使用
removeChild(document.getElementById("correspondingId"))
以便将其从 DOM 中删除。
希望解决方案有所帮助。
你在这一行中有一个分号
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>