In the <ul> tag, I want to add the value of the XML node as the <li> tag.
With the xmlDoc.documentElement.childNodes; code, the child node of the root node (<person>) (<name<name>, <address>, <<, <phone>), and generate the child tags as a ul.appendChild(li); code to the <ul> tag.
console.log(x[i].ChildNodes[0].nodeValue); When I checked that the values were correct, the values of each node were correctly specified. Please advise me what the problem is.
Uncaught TypeError: Cannot read property 'appendChild' of null
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var text="<person>";
text += "<name>name1</name>";
text += "<address>address1</address>";
text += "<phone>phone1</phone>";
text += "</person>";
if (window.DOMParser)
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(text,"text/xml");
}
else // Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(text);
}
x=xmlDoc.documentElement.childNodes;
var ul = document.getElementById("u");
for(var i in x){
var li = document.createElement("li");
li.innerHTML = x[i].childNodes[0].nodeValue;
console.log(x[i].childNodes[0].nodeValue);
ul.appendChild(li);
}
</script>
</head>
<body>
<ul id="u">
</ul>
</body>
</html>
It turns out that ul is undefined.
The reason is that the browser has not yet read the <ul> tag at the time the script runs. This is precisely because the script ran before it was created as a DOM object while rendering the <ul> tag.
Try to place the script below <ul> as shown below.
Alternatively, you can use window.onload.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul id="u"></ul>
<script type="text/javascript">
// Make sure this script runs after HTML loads
var text = "<person>";
text += "<name>name1</name>";
text += "<address>address1</address>";
text += "<phone>phone1</phone>";
text += "</person>";
if (window.DOMParser) {
parser = new DOMParser();
xmlDoc = parser.parseFromString(text, "text/xml");
} else // Internet Explorer
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(text);
}
x = xmlDoc.documentElement.childNodes;
var ul = document.getElementById("u");
for ( var i in x) {
var li = document.createElement("li");
li.innerHTML = x[i].childNodes[0].nodeValue;
console.log(x[i].childNodes[0].nodeValue);
ul.appendChild(li);
}
</script>
</body>
</html>
© 2024 OneMinuteCode. All rights reserved.