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>