Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.08.2012, 11:38
Новичок на форуме
Отправить личное сообщение для varnava Посмотреть профиль Найти все сообщения от varnava
 
Регистрация: 08.08.2012
Сообщений: 3

Как добавить div в уже существующий div
Возникла проблема при верстки. У меня такая ситуация:

<div class="taxonomy-images">
<a class="taxonomy-image-links" href="/artists/andrey">
Andrey
</div>

мне нужно Andrey обвернуть в свой див и задать ему свой class или id, что бы было так

<div class="taxonomy-images">
<a class="taxonomy-image-links" href="/artists/andrey">
<div class="name">
Andrey
</div>
</div>

Прошу помочь, смотрел это Как с помощью javascript создать div ? то что нужно только как поставить div который создался в то место, где мне нужно.

Последний раз редактировалось varnava, 10.08.2012 в 11:44.
Ответить с цитированием
  #2 (permalink)  
Старый 10.08.2012, 11:45
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

varnava,
Если на jQuery достаточно легко - на чистом js - нун парсить по классу от ближайшего элемента с id
Ответить с цитированием
  #3 (permalink)  
Старый 10.08.2012, 11:52
Новичок на форуме
Отправить личное сообщение для varnava Посмотреть профиль Найти все сообщения от varnava
 
Регистрация: 08.08.2012
Сообщений: 3

Сообщение от Deff Посмотреть сообщение
varnava,
Если на jQuery достаточно легко - на чистом js - нун парсить по классу от ближайшего элемента с id
можно и на jQuery решене, мне главное решение проблемы.
Ответить с цитированием
  #4 (permalink)  
Старый 10.08.2012, 11:56
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

varnava,
<div class="taxonomy-images">
<a class="taxonomy-image-links" href="/artists/andrey">
Andrey
</a></div>
<script>
var a = document.getElementsByClassName("taxonomy-image-links")[0];
var div = document.createElement("div");
div.className = "name";
//или div.setAttribute("class", "name");
div.appendChild(document.createTextNode(a.innerHTML));
a.innerHTML = "";
a.appendChild(div);
alert(document.getElementsByClassName("taxonomy-images")[0].innerHTML);
</script>
Ответить с цитированием
  #5 (permalink)  
Старый 10.08.2012, 12:09
Новичок на форуме
Отправить личное сообщение для varnava Посмотреть профиль Найти все сообщения от varnava
 
Регистрация: 08.08.2012
Сообщений: 3

lord2kim сделал так, не работает

<style>
.div_one {
font-size: 22px;
color: red;
}
</style>

<script>
var a = document.getElementsByClassName("taxonomy-image-links")[0];
var div = document.createElement("div");
div.className = "div_one";
// или div.setAttribute("class", "div_one");
div.appendChild(document.createTextNode(a.innerHTM L));
a.innerHTML = "";
a.appendChild(div);
alert(document.getElementsByClassName("taxonomy-images")[0].innerHTML);
</script>
Ответить с цитированием
  #6 (permalink)  
Старый 10.08.2012, 12:13
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

<style>
.div_one {
font-size: 22px;
color: red;
}
</style>

<div class="taxonomy-images">
<a class="taxonomy-image-links" href="/artists/andrey">
Andrey
</a></div>

<script>
var a = document.getElementsByClassName("taxonomy-image-links")[0];
var div = document.createElement("div");
div.className = "div_one";
// или div.setAttribute("class", "div_one");
div.appendChild(document.createTextNode(a.innerHTML));
a.innerHTML = "";
a.appendChild(div);
alert(document.getElementsByClassName("taxonomy-images")[0].innerHTML);
</script>

что бы работало в IE нужно реализовать метод getElementsByClassName(), который там отсутствует
например
// getElementsByClassName for IE
if (typeof document.getElementsByClassName == 'undefined') {
	document.getElementsByClassName = function(classname) {
		var all = document.all,
		elements = [],
		regexpr = new RegExp('\\b'+classname+'\\b','ig');
		for(var x=0; x<all.length; x++) if (all[x].className)
		if (all[x].className.search(regexpr)!=-1) elements[elements.length] = all[x];
		return elements;
	}
}

Последний раз редактировалось lord2kim, 10.08.2012 в 12:15.
Ответить с цитированием
  #7 (permalink)  
Старый 10.08.2012, 12:29
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>

<style type="text/css">
div.name {
  background:#FFFF00;
}
</style>




<div class="taxonomy-images">
      <a class="taxonomy-image-links" href="/artists/andrey">Andrey</a>
</div>
 
<script type="text/javascript">
var elem=$(".taxonomy-images").find(".taxonomy-image-links");
elem.html('<div class="name">'+elem.html()+'</div>');
</script>

Последний раз редактировалось Deff, 10.08.2012 в 12:34.
Ответить с цитированием
  #8 (permalink)  
Старый 10.08.2012, 16:35
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

<body>
<style>
	.name {
		color:green;
	}
</style>

<div class="taxonomy-images">
	<a class="taxonomy-image-links" href="/artists/andrey">
		Andrey
	</a>
</div>

<script>
window.onload = function () {
	var a = document.body.children[1].children[0];
		alert(document.body.children[1].innerHTML);
	a.innerHTML = '<div class="name">' + a.innerHTML;
		alert(document.body.children[1].innerHTML);
}
</script>
Ответить с цитированием
  #9 (permalink)  
Старый 11.08.2012, 13:16
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Столько вариантов и все некрасивые.=(
Если ноду можно не пересоздавать - ноду нужно не пересоздавать, а использовать. В этом смысл DOM.
<!DOCTYPE HTML>
<html>
<head>
	<style>
		.name {
			color:green;
		}
	</style>
	<script>
		window.onload = function () {
		var d = document, 
			div = d.createElement('div'),
			a = d.getElementsByClassName("taxonomy-image-links")[0],
			name = a.firstChild;
		div.className = 'name';
		div.appendChild( a.replaceChild(div,name) )

		alert(document.body.innerHTML);
		}
	</script>
</head>
<body>
<div class="taxonomy-images">
	<a class="taxonomy-image-links" href="/artists/andrey">
		Andrey
	</a>
</div>
</body>
</html>
__________________
29375, 35

Последний раз редактировалось Aetae, 11.08.2012 в 13:25.
Ответить с цитированием
  #10 (permalink)  
Старый 11.08.2012, 13:36
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от Aetae
ноду нужно не пересоздавать, а использовать. В этом смысл DOM.
Хм, у меня нет противоречий с данным утверждением и собственно не вижу разницы во вставке внутрь тега <a appendChild (ом) или innerHTML (ом) - посколь внутри текст, хотя метода полезна для более сложных вставок
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать, чтобы при удалении div браузер не перепрыгивал наверх станицы EvgeniyRRU Events/DOM/Window 4 02.10.2011 12:42
Как добавить метод ко всем элементам? zubr80 Events/DOM/Window 3 06.04.2009 05:46
Как узнать о том, что флэш уже загрузился. Snipe Общие вопросы Javascript 4 29.01.2009 11:21
как динамически добавить столбец oxx Элементы интерфейса 4 06.11.2008 17:23
Как добавить свой блог в раздел feeds этого сайта IzumeRoot Ваши сайты и скрипты 13 30.10.2008 21:11