обрамление элементов
добрый день, как обрамить уже существующий элемент динамически созданным элементом? пару способов наскречил в уме, но они кажутся мне грязными, хотел бы элегантный и красивый, а также быстрый способ
p.s: на чистом js |
wrap без jquery
Tecvid,
:-?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div{
display: inline-block;
padding: 10px;
background-color: #0000CD;
}
b{
background-color: #FFD700;
color: #FF0000;
}
</style>
</head>
<body>
<b>test</b>
<script>
function wrap(createEelem, currentElem)
{
var parentElem = currentElem.parentNode;
currentElem = parentElem.replaceChild(createEelem, currentElem);
createEelem.appendChild(currentElem)
}
var createEelem = document.createElement('div'), currentElem = document.querySelector('b');
wrap(createEelem, currentElem)
</script>
</body>
</html>
|
спасибо большое :) кстати пока ждал ответа нашёл ещё один способ, может кому-то интересно будет (хотя мне кажется что это одно и тоже почти)
http://jonlabelle.com/snippets/view/...-in-javascript |
wrapAll без jquery - обернуть элемент/ы
Tecvid,
то же самое что по вашей ссылке но методом из 2 поста - обернуть каждый элемент созданным + параметр all => обернуть все элементы в один созданный.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div,ol,li,p{margin:0;padding:0}
hr{border:1px solid #aaa}
li{list-style:none}
ol>li,div>p{background:#F00}
</style>
</head>
<body>
<hr />
<p id="message">Hello, world!</p>
<hr />
<hr />
<li id="4">Apples</li>
<hr />
<li id="3">Bananas</li>
<li id="2">Cherries</li>
<hr />
<li id="1">Dates</li>
<hr />
<script>
function wrap(create, elms, all) {
function fn(item, i) {
var to = all || i == len - 1 ? create : create.cloneNode(true);
item = item.parentNode.replaceChild(to, item);
to.appendChild(item)
}
var len = elms.length;
len ? Array.prototype.forEach.call(elms, fn) : fn(elms)
};
var message = document.getElementById('message');
var div = document.createElement('div');
wrap(div, message);
var fruits = document.getElementsByTagName('li');
var ol = document.createElement('ol');
wrap(ol, fruits);
</script>
</body>
</html>
пример использования параметра all - обернуть все li в один ol
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div,ol,li,p{margin:0;padding:0}
hr{border:1px solid #aaa}
li{list-style:none}
ol>li,div>p{background:#F00}
</style>
</head>
<body>
<hr />
<p id="message">Hello, world!</p>
<hr />
<hr />
<li id="4">Apples</li>
<hr />
<li id="3">Bananas</li>
<li id="2">Cherries</li>
<hr />
<li id="1">Dates</li>
<hr />
<script>
function wrap(create, elms, all) {
function fn(item, i) {
var to = all || i == len - 1 ? create : create.cloneNode(true);
item = item.parentNode.replaceChild(to, item);
to.appendChild(item)
}
var len = elms.length;
len ? Array.prototype.forEach.call(elms, fn) : fn(elms)
};
var fruits = document.getElementsByTagName('li');
var ol = document.createElement('ol');
wrap(ol, fruits, true);
</script>
</body>
</html>
|
аа понятно, благодарю)
|
| Часовой пояс GMT +3, время: 23:15. |