2017-05-14 1 views
0

Unten Code funktioniert wie erwartet.JS und HTML - cloneNode() funktioniert nicht

CloneNode.js

<!DOCTYPE html> 
<html> 
     <body> 
      <script src="../js/CloneNode.js"> 
      function myFunction(){ 
       var the_node = document.getElementById("myList").lastChild; 
       var the_clone = the_node.cloneNode(true); 
       document.getElementById("myList").appendChild(the_clone); 
       } 
      </script> 
      <ul id="myList"> 
      <li>Good morning</li> 
      <li>Hello</li></ul> 
      <p>Click on the button to CloneNode()</p> 
      <button onclick = "myFunction()">Copy it!</button> 
    </body> 
</html> 

Es arbeitet für Code unten fein auch:

<ul id="myList"><li>Good morning</li> 
<li>Hello</li></ul> 

ODER

<ul id="myList"><li>Good morning</li><li>Hello</li></ul> 

Aber wenn ich eingeben Newline vor </ul> in über HTML Code, wie unten, ich habe nicht die Ou tput. Daher keine Ergänzung von <li> Element auf der Webseite.

<ul id="myList"> 
<li>Good morning</li> 
<li>Hello</li> 
</ul> 

Wie kann das Einrücken in HTML-Code die Ausgabe beeinflussen? Oder gibt es etwas, das ich vermisst habe?

Antwort

1

Element.lastChild kehrt TextNode Knoten sowie Element Knoten, wird die neue Zeile Zeichen als aufgelöst leer TextNode wenn abgefragt, so es egal, ändern

var the_node = document.getElementById("myList").lastChild;

zu

funktioniert var the_node = document.getElementById("myList").lastElementChild;

+0

Dank @dummy. Die obige Lösung hat funktioniert. – kanchan

+1

@kanchan: Sie sollten es als die Antwort markieren. – Whothehellisthat