function convertxml() {
var getxml = document.getElementById("inputxml").value;
document.getElementById("outputxml").innerHTML = getxml;
name = document.getElementsByTagName("name")[0].childNodes[0].nodeValue;
document.getElementById("name").innerHTML = name;
adress = document.getElementsByTagName("adress")[0].childNodes[0].nodeValue;
document.getElementById("adress").innerHTML = adress;
birthday = document.getElementsByTagName("birthday")[0].childNodes[0].nodeValue;
document.getElementById("birthday").innerHTML = birthday;
}
input,
button {
display: block;
}
#outputxml {
display: none;
}
textarea {
height: 300px;
width: 500px;
}
<textarea id="inputxml">
<employee>
<name>John Doe</name>
<birthday>01-01-1990</birthday>
<adress>Streetname 123</adress>
</employee>
<employee>
<name>Jane Doe</name>
<birthday>02-02-2000</birthday>
<adress>Streetname 123</adress>
</employee>
</textarea>
<button id="convertxml" type="button" onClick="convertxml()">Convert</button>
<div id="outputxml"></div>
<table>
<tr>
<th></th>
</tr>
<tr>
<td class="label">Name:</td>
<td id="name"></td>
</tr>
<tr>
<td class="label">Adress:</td>
<td id="adress"></td>
</tr>
<tr>
<td class="label">Birthday:</td>
<td id="birthday"></td>
</tr>除非绝对必要，否则我不会将XML放在a中，但是，更一般而言，我会使用XPATH创建一个动态表，这样：
<textarea>
function convertxml() {
dest = document.querySelector('#theTable');
let area = document.evaluate(
'//textarea',
document,
null,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
null
);
const data = new DOMParser().parseFromString(
area.snapshotItem(0).textContent,
'text/xml'
);
results = data.evaluate(
'//employee',
data,
null,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
null
);
for (let i = 0; i < results.snapshotLength; i++) {
let node = results.snapshotItem(i);
let info = data.evaluate(
'.//*',
node,
null,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
null
);
let row = [];
for (let i = 0; i < info.snapshotLength; i++) {
let item = info.snapshotItem(i);
row.push(item.textContent);
}
dest.insertAdjacentHTML(
'beforeend',
`<tr><td>${row[0]}</td><td>${row[1]}</td></td><td>${row[2]}</td></tr>`
);
}
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
</head>
<body>
<textarea id="inputxml">
<doc>
<employee>
<name>John Doe</name>
<birthday>01-01-1990</birthday>
<adress>Streetname 123</adress>
</employee>
<employee>
<name>Jane Doe</name>
<birthday>02-02-2000</birthday>
<adress>Streetname 124</adress>
</employee>
</doc>
</textarea>
<button id="convertxml" type="button" onClick="convertxml()">Convert</button>
<table id='theTable' border='1'><tr><td>Name</td><td>Birthday</td><td>Address</td></tr></table>
</body>
</html>}