Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.04.2015, 14:06
Профессор
Отправить личное сообщение для Tecvid Посмотреть профиль Найти все сообщения от Tecvid
 
Регистрация: 13.12.2013
Сообщений: 175

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

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

Последний раз редактировалось Tecvid, 11.04.2015 в 14:28.
Ответить с цитированием
  #2 (permalink)  
Старый 11.04.2015, 14:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

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>
Ответить с цитированием
  #3 (permalink)  
Старый 11.04.2015, 14:40
Профессор
Отправить личное сообщение для Tecvid Посмотреть профиль Найти все сообщения от Tecvid
 
Регистрация: 13.12.2013
Сообщений: 175

спасибо большое кстати пока ждал ответа нашёл ещё один способ, может кому-то интересно будет (хотя мне кажется что это одно и тоже почти)
http://jonlabelle.com/snippets/view/...-in-javascript
Ответить с цитированием
  #4 (permalink)  
Старый 11.04.2015, 19:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

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>
Ответить с цитированием
  #5 (permalink)  
Старый 12.04.2015, 14:26
Профессор
Отправить личное сообщение для Tecvid Посмотреть профиль Найти все сообщения от Tecvid
 
Регистрация: 13.12.2013
Сообщений: 175

аа понятно, благодарю)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывод случайных элементов из массива в таблицу Narm0 Общие вопросы Javascript 10 06.08.2013 12:39
Удалить и вернуть массив из удаленных элементов splice Paulyyy Общие вопросы Javascript 15 29.05.2013 15:36
запретить изменение количество элементов в списке Antistas jQuery 0 05.12.2012 14:05
Получить список ВСЕХ элементов DOM Почемучкин Events/DOM/Window 7 16.04.2012 11:33
Сгенерировать 2 последовательности и узнать сколько в них одинаковых элементов Ирина Владимировна Общие вопросы Javascript 10 24.03.2012 18:18