Deploying ul in li please pure js :)

[manoodin]

how to deploy ul in li?

it is like this:

<div id="Australian-Brother" >
<li>1</li>
<li>2</li>
<li>3</li>
</div>

I want to leave it like this:

<div id="Australian-Brother" >
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>

[Mittineague]

Please post the code most responsible for producing the current “is like this” HTML With luck it could be a line or two tweak.

[Paul_Wilkins]

Could it be that he wants JavaScript that will transform the first HTML example into the second set of HTML?

[codeispoetry]

Probably he wanted to say where ul is missing how to envelop all li tags in one common ul.

[James_Hibbard]

@Paul_Wilkins

Could it be that he wants JavaScript that will transform the first HTML example into the second set of HTML?

Teh codez:

const container = document.getElementById('Australian-Brother');
const lis = container.querySelectorAll('li');
const ul = document.createElement('ul');
lis.forEach((li) => { ul.appendChild(li); });
container.innerHTML = '';
container.appendChild(ul);

Is there a more concise way to do it?

[m3g4p0p]

@Paul_Wilkins

Could it be that he wants JavaScript that will transform the first HTML example into the second set of HTML?

In this case it may already be to late as the browser tried to fix the invalid markup by itself, leading to a hardly predictable element tree (especially if you have nested lists). One might get away with a simple markup as in the OP though.

@James_Hibbard

Is there a more concise way to do it?

Well you don’t need to clear the container HTML as appendChild() doesn’t clone but move the child node… and using append() instead you could just nicely spread the container children:

const container = document.getElementById('Australian-Brother')
const list = document.createElement('ul')

list.append(...container.children)
container.append(list)

But again I think this is purely academic – better use valid markup from the start. ^^

[James_Hibbard]

@m3g4p0p

But again I think this is purely academic – better use valid markup from the start. ^^

Absolutely. As you say, an academic exercise.

@m3g4p0p

Well you don’t need to clear the container HTML as appendChild() doesn’t clone but move the child node…

Lol, oh yeah.

@m3g4p0p

and using append() instead you could just nicely spread the container children

Much more concise. Nice one.

I know we don’t need it nowadays, but I still miss jQuery:

$('#Australian-Brother').append('<ul>');
$('ul').append($.find('li'));

[m3g4p0p]

@James_Hibbard

jQuery

$('#Australian-Brother > li').wrapAll('<ul />')

Booya! :-D

[James_Hibbard]

Lol, beaten. You 'da man!