HTML-узел не добавляется

В приведенной ниже программе я пытаюсь добавить и удалить дочерние узлы в / из родительского узла в 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 кнопка.
Источник

2 ответа

Решение

У вас точка с запятой в этой строке

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

Это всегда будет выполнять код, будь то node2 существует или нет, но если вы удалите это, то код не будет выполняться, потому что node2 не имеет идентификатора

Вам нужно установить 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>

Источник

Это не сработает, так как узел 2 является вновь созданным элементом, и он не является частью DOM, пока вы не добавите его в родительский узел. Вот почему он дает вам ошибку, говоря

Uncaught NotFoundError: Не удалось выполнить "removeChild" на "Узле": удаляемый узел не является дочерним по отношению к этому узлу.

Теперь мы придем к решению для этого.

  1. Перед снятием проверить погоду элемент присутствует или нет. и удали это. Вместо того, чтобы использовать removeChild(узел), лучше пойти с

RemoveChild(document.getElementById("correspondingId"))

так что он удаляет его из DOM.

Надеюсь, что решение помогло.

Источник
Другие вопросы по тегам