Последние записи

made in programmersforum 7

Интенсив по Python: Работа с API и фреймворками 24-26 ИЮНЯ 2022. Знаете Python, но хотите расширить свои навыки?
Slurm подготовили для вас особенный продукт! Оставить заявку по ссылке - https://slurm.club/3MeqNEk

Online-курс Java с оплатой после трудоустройства. Каждый выпускник получает предложение о работе
И зарплату на 30% выше ожидаемой, подробнее на сайте академии, ссылка - ttps://clck.ru/fCrQw

25th
Фев

Можно вставить в HTML элемент из XML?

Posted by obzor under JavaScript

Подскажите хоть один работающий пример вставки элемента из xml в html.

Например есть файлы
html

Код:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>planets</title>
	
<!--<script>
*** document.location="planets1.xml"
</script>-->
	<script>
/*		document.write('planets1.xml');*/
	</script>	
<link href="planets1.css" rel="stylesheet" type="text/css">
</head>

<body>
<div>
  <table width="100%">
    <th> Планета</th>
      <th> Масса</th>
      <th> Период обращения(дней)</th>
      <th> Радиус</th>
      <th> Плотность (земля=1)</th>
      <th> Расстояние в перигелии млн. км.</th>	
  </table>

<!--	<script>
		const main=document.querySelector('.main')
		const h1=document.createElement('h1');
		h1.textContent='Hello';
		main.append(h1);
</script>-->
	</div>
</body>
</html>

и xml

Код:

<?xml version="1.0" encoding="utf-8"?>
<!--File name planets1.xml-->
<!--Подключаем CSS-->
<!--<?xml-stylesheet type="text/css" href="planets.css"?>-->
<planets>
	<planet>
		<name>Меркурий</name>
		<mass>Масса (Земля=1).0553</mass>
		<day>Период обращения (дней)58.65</day>
		<radius>Радиус km2440</radius>
		<density>Плотность (Земля=1).983</density>
		<distance>Расстояние в перигелии млн. км.69.8</distance>
	</planet>
	<planet>
		<name>Венера</name>
		<mass>"Масса (Земля=1)".815</mass>
		<day>"Период обращения (дней)"116.75</day>
		<radius>"Радиус km"5980</radius>
		<density>"Плотность (Земля=1)".943</density>
		<distance>"Расстояние в перигелии млн. км."10.75</distance>
	</planet>
	<planet>
		<name>Земля</name>
		<mass>"Масса (Земля=1)"1</mass>
		<day>"Период обращения (дней)"1</day>
		<radius>"Радиус km"3390</radius>
		<density>"Плотность (Земля=1)"1</density>
		<distance>"Расстояние в перигелии млн. км."206.63</distance>
	</planet>
</planets>

Как заполнить таблицу данными?

Arigato

Ну если целиком, то можно через iframe.

p51x

Зачем iframe? Очевидно xml-парсер и генерация таблицы.

Arigato

Или простая замена тегов в XML на HTML-теги. Набросал пример:

Код:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>planets</title>
	
<script>
function main(){
	fetch("planets1.xml").then((response) => {
		if (response.ok) {
			response.text().then((text) => {
				let planets = text.match(/<planets>(.*?)<\/planets>/s);
				if (planets) {
					let html = planets[1].replace(/<planet>(.*?)<\/planet>/gs, (match, p1) => {
						p1 = p1.replace(/<(\/{0,1})(.*?)>/gs, "<$1td>");
						return `<tr>${p1}</tr>`;
					});
					document.getElementById("result").innerHTML += html;
				}
			});
		}
	});
}
addEventListener("DOMContentLoaded", main);
</script>
<link href="planets1.css" rel="stylesheet" type="text/css">
</head>

<body>
<div>
	<table width="100%" id="result" border="1">
		<thead>
			<tr>  
				<th> Планета</th>
				<th> Масса</th>
				<th> Период обращения(дней)</th>
				<th> Радиус</th>
				<th> Плотность (земля=1)</th>
				<th> Расстояние в перигелии млн. км.</th>	
			</tr>
		</thead>
	</table>
</div>
</body>
</html>

Файл planets1.xml должен лежать в той же папке. Запускать через сервер.

druidvic

Спасибо. Работает.
Я имел ввиду несколько другое:
найти в файле xml нужный элемент, например, в planets.xml <name>Меркурий</name> (один элемент) связать его с тегом в html.

Код:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>

<body>
	<p id="1">name</p>
	<p id="2">name</p>
</body>
</html>

id1=Меркурий
id2=Венера
Т.е. чтобы вместо name отображался связанный элемент — Меркурий, Венера и т.д. Меняешь в xml — меняется в html.

Arigato

Можно по аналогии с примером выше, но не все данные выводить, а брать конкретные нужные теги. Пример:

Код:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>planets</title>
	
<script>
function main(){
	// открываем xml
	fetch("planets1.xml").then((response) => {
		if (response.ok) {
			response.text().then((text) => {
				// находим корневой тег <planets>
				let planets = text.match(/<planets>(.*?)<\/planets>/s);
				if (planets) {
					let html = "";
					// перебираем все планеты (теги <planet>)
					planets = planets[1].match(/<planet>(.*?)<\/planet>/gs);
					planets.forEach((planet) => {
						// получаем значение тега <name> для конкретной планеты
						let name = planet.match(/<name>(.*?)<\/name>/s);
						name = name ? name[1] : "";
						html += `<p>${name}</p>`;
					});
					// выводим сформированный html
					document.getElementById("result").innerHTML = html;
				}
			});
		}
	});
}
addEventListener("DOMContentLoaded", main);
</script>
<link href="planets1.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div id="result"></div>
</body>
</html>

Arigato

Ну и в качестве альтернативы можно сделать так:

Код:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>planets</title>
	
<script>
function main(){
	// открываем xml
	let xhr = new XMLHttpRequest();
	xhr.open("GET", "planets1.xml");
	xhr.responseType = 'document';
	xhr.onload = () => {
		let html = "";
		let xml = xhr.response;
		// перебираем все теги <name>
		let names = xml.querySelectorAll("name");
		names.forEach((name) => {
			html += `<p>${name.innerHTML}</p>`;
		});
		// выводим сформированный html
		document.getElementById("result").innerHTML = html;
	};
	xhr.send();
}
addEventListener("DOMContentLoaded", main);
</script>
</head>

<body>
	<div id="result"></div>
</body>
</html>

тема на форуме

Случайные статьи

Теги: XMLHttpRequest

Купить рекламу на сайте за 1000 руб
пишите сюда - alarforum@yandex.ru

Да и по любым другим вопросам пишите на почту

пеллетные котлы

Пеллетный котел Emtas

Наши форумы по программированию: