Задать вопрос
zencd
@zencd
javascript

Почему не работает модификация DOM в XHTML?

Файл .xhtml открываю в Хроме. В дом должен добавиться тег, но ничего не происходит. Ошибок в консоли нет. Стоит поменять расширение на .html, как программа начинает работать.

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
  <div id="parent"></div>
</body>
<script>
  $(document).ready(function() {
    var added = $('<i/>');
    added.text("added tag");
    $( "#parent" ).append(added);
  });
</script>
</html>


Живой неработающий пример: https://dl.dropboxusercontent.com/u/1883230/rg/dom...
  • Вопрос задан
  • 2384 просмотра
Комментировать
Подписаться 3 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 2
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
При создании элементов (и атрибутов) в пространствах имён (это то, что указано в атрибуте xmlns) требуется вызов createElementNS с указанием этого самого пространства

var test = document.createElementNS('http://www.w3.org/1999/xhtml', 'i');


Технически, можно и не указывать пространство, но тогда все элементы будут относиться к тому пространству, в котором расположен глобальный контекст (это если вы решите динамически inline SVG модифицировать).

Напишите маленькую функцию (или прототип jQuery расширьте). Можете сделать её и немаленькой — с парсингом строки для выделения имени тэга и атрибутов.

$.extend($, {
	createNS: function (tag, ns) {
		return $(document.createElementNS(ns, tag));
	}
});

$(function () {
	$.createNS('i', 'http://www.w3.org/1999/xhtml')
		.text('added tag')
		.appendTo($('#parent'));
});


Update: причину глюка верно указал @SelenIT2 — заключите в CDATA свой скрипт. И вообще следуйте требованиям синтаксиса и структуры XML.

Тем не менее, вопрос о пространстве имён имеет значение при генерации элементов и атрибутов из пространства, отличающего от того, в котором находится глобальный контент (SVG, RDFa и т.п.).
Ответ написан
Комментировать
Комментировать
KOLANICH
@KOLANICH
Знаю JS, PHP, C++, C#
используйте 
document.body.addEventListener("DOMContentLoaded",()=>{
   let el=document.createElement("I");
   el.innerHTML="addedTag";
   document.getElementById("parent").appendChild(el);
},false);


и script внутри body

и
<!DOCTYPE html>
Ответ написан
6 комментариев
6 комментариев
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разметчик данных (аннотатор, асессор ML-датасетов) на ГПХ
29 нояб. 2024, в 02:30
60000 руб./за проект
Сценарии для REELS в крупном проекте
29 нояб. 2024, в 02:28
100000 руб./за проект
Разместить шаблон сайта с личным кабинетом под хостинг серверов
29 нояб. 2024, в 01:43
7000 руб./за проект
Ещё заказы