Форум

varnava · #1 (**permalink**) 10.08.2012, 11:38

Возникла проблема при верстки. У меня такая ситуация:

<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 который создался в то место, где мне нужно.

Deff · #2 (**permalink**) 10.08.2012, 11:45

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

varnava · #3 (**permalink**) 10.08.2012, 11:52

Сообщение от Deff

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

можно и на jQuery решене, мне главное решение проблемы.

lord2kim · #4 (**permalink**) 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 · #5 (**permalink**) 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 · #6 (**permalink**) 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 · #7 (**permalink**) 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 · #8 (**permalink**) 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 · #9 (**permalink**) 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 · #10 (**permalink**) 11.08.2012, 13:36

Сообщение от Aetae

ноду нужно не пересоздавать, а использовать. В этом смысл DOM.

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

Форум

Справочник

Discord чат

Курсы javascript