Форум

Tecvid · #1 (**permalink**) 11.04.2015, 14:06

добрый день, как обрамить уже существующий элемент динамически созданным элементом? пару способов наскречил в уме, но они кажутся мне грязными, хотел бы элегантный и красивый, а также быстрый способ

p.s: на чистом js

рони · #2 (**permalink**) 11.04.2015, 14:27

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>

Tecvid · #3 (**permalink**) 11.04.2015, 14:40

спасибо большое

кстати пока ждал ответа нашёл ещё один способ, может кому-то интересно будет (хотя мне кажется что это одно и тоже почти)
http://jonlabelle.com/snippets/view/...-in-javascript

рони · #4 (**permalink**) 11.04.2015, 19:55

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>

Tecvid · #5 (**permalink**) 12.04.2015, 14:26

аа понятно, благодарю)

Форум

Справочник

Discord чат

Курсы javascript