Restructuring html elements

Question

I have the following HTML element structure:

<span class="parent">
    <span class="keyword">belal</span>
    <span class="string"> "Belal Mostafa"</span>
</span>

now I want to dynamically select the .parent class and restructure its children it to look like:

<span class="parent">
    <span class="keyword">belal</span>
    <span class="string"> "Belal </span>
    <span class="string"> Mostafa"</span>
</span>

I was thinking of the following but still can't get it done:

• unwrap .string class get the text from it
• then split it on white spaces
• then append each string to a new span element

Answer 1

You can do this with jQuery append

var text  = $(".string").text().trim(); //getting text of string element
$(".string").remove(); //removing existing
text.split(" ").forEach(function(item){ //splitting it to append span elements
  $(".parent").append("<span class='string'>" + item + "</span>"); //appending to parent element
});

.string{
  border: 1px solid blue; /*just for view, remove it later*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="parent">
    <span class="keyword">belal</span>
    <span class="string"> "Belal Mostafa"</span>
</span>

Answer 2

You can loop on each .parent, after that loop on each string and split all white space and append the result to the parent.

Example

$(".parent .string").each(function(){
  if($(this).text().trim().indexOf(" ") != -1)
  {
    var parent = $(this).parents(".parent");
    $.each($(this).text().trim().split(" "),function(index,value){
      parent.append("<span class='string'>"+value+"</span>");
    });
    $(this).remove();
  }
});

.string{
  border:solid 1px #888;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="parent">
    <span class="keyword">belal</span>
    <span class="string"> "Belal Mostafa Test"</span>
</span>