CODEWITHSUNDEEP
javascripthtmlcssdomecmascript-6
Hiero
Hiero

Reputation: 2205

Best way to split word in letters using DOM

I have the following structure.

<div class="container">
  <span>word</span>
  <span>word2</span>
  <span>word3</span>
</div>

And I want the output to be:

<span><b>w</b><b>o</b><b>r</b><b>d</b></span>

To achieve that I use the following code:

let containers = document.querySelectorAll('.container');

Array.from(containers, x => {       
    Array.from(x.children, y => {    

        let text = y.innerText;
        y.innerHTML = '';

        for(let c of text) {
            y.innerHTML += `<b>${c}</b>`;
        }           
    });
});

But I dont really like that I need to clear the HTML then append the letters wrapper.

Does anybody knows a better solution to achieve this?

http://jsbin.com/rexaqis/edit?html,css,js,output

Upvotes: 0

Views: 68

Answers (1)

Gino Pane
Gino Pane

Reputation: 5011

Try this:

y.innerHTML = y.innerHTML.split('').map(function(element){
    return '<b>' + element + '</b>';
}).join('');

Upvotes: 3

Related Questions