Javascript 重新构造html元素

我有以下HTML元素结构：

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

我曾想过以下几点，但仍然无法实现：

• string类从中获取文本
• 然后在空白处拆分
• 然后将每个字符串附加到一个新的span元素

---

您可以在每个

.parent上循环，然后在每个字符串上循环，分割所有空白并将结果附加到父级

范例


$（.parent.string”）.each（函数（）{
if（$（this）.text（）.trim（）.indexOf（“”！=-1）
{
var parent=$（this.parents（“.parent”）；
$.each（$（this）.text（）.trim（）.split（“”），函数（索引，值）{
parent.append（“+value+”）；
});
$（this.remove（）；
}
});
.string{
边框：实心1px#888；
}

贝拉尔
“Belal-Mostafa试验”
您可以使用jQuery
append


var text=$（“.string”）.text（）.trim（）//获取字符串元素的文本
$（“.string”）.remove（）//移除现有的
text.split（“”）.forEach（函数（项）{//将其拆分以附加span元素
$（“.parent”）.append（“+item+”）；//追加到父元素
});
.string{
边框：1px纯蓝色；/*仅供查看，请稍后删除*/
}

贝拉尔
“贝拉尔·莫斯塔法”
“仍然无法完成”-那么，您尝试了什么？你能给我们看看你尝试过的jQuery代码吗？我可以在.string类中附加一个span，但我不知道如何在“belal first然后为另一个单词Mostafa打开一个新标记”之后关闭第一个.string类，你明白我的意思吗？@BelalMostafaAmin你可以删除第一个并用所有部分替换它（而不是尝试在第一部分之后“关闭”它，然后添加其他部分）在父元素中附加span，而不是在.keyword span；pOhh抱歉，忽略，我将修复它：）其他提示，使用trim（）方法避免文本前后出现空格。在这里，你创建了一个空的Span很好，这是有效的，我不能添加正确的解决方案，因为某些原因，但它是工作的需要
<span class="parent">
    <span class="keyword">belal</span>
    <span class="string"> "Belal </span>
    <span class="string"> Mostafa"</span>
</span>