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

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

Действия по воспроизведению проблемы:

Откройте HTML-страницу, а затем нажмите на кнопку Node 1.

источник

2015-07-09 sps

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

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>

источник

2015-07-09 04:49:47

спасибо за указание другие проблемы ... – sps

Добро пожаловать, рад, что я мог бы помочь –

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

Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

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

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

removeChild(document.getElementById("correspondingId"))

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

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

источник

2015-07-09 04:47:57

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

ответ

Смежные вопросы