Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как добавить div в уже существующий div (https://javascript.ru/forum/misc/30627-kak-dobavit-div-v-uzhe-sushhestvuyushhijj-div.html)

varnava 10.08.2012 11:38
Как добавить 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>

Прошу помочь, смотрел это http://javascript.ru/forum/xhtml-htm...ozdat-div.html то что нужно только как поставить div который создался в то место, где мне нужно.

Deff 10.08.2012 11:45
varnava,
Если на jQuery достаточно легко - на чистом js - нун парсить по классу от ближайшего элемента с id

varnava 10.08.2012 11:52
Цитата:
Сообщение от Deff (Сообщение 196157)
varnava,
Если на jQuery достаточно легко - на чистом js - нун парсить по классу от ближайшего элемента с id
можно и на jQuery решене, мне главное решение проблемы.

lord2kim 10.08.2012 11:56
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>

varnava 10.08.2012 12:09
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>

lord2kim 10.08.2012 12:13 
<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;
	}
}

Deff 10.08.2012 12:29 
<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>

bes 10.08.2012 16:35 
<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>

Aetae 11.08.2012 13:16
Столько вариантов и все некрасивые.=(
Если ноду можно не пересоздавать - ноду нужно не пересоздавать, а использовать. В этом смысл 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>

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


Часовой пояс GMT +3, время: 01:30.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице