javascript - 附加后如何删除不需要的html？

Question

var split = $('.split-locations').text().split('\n');
for (var i = 0; i < split.length; i++) {
   $('.split-locations').append("<pre>"+split[i]+"</pre>");
}

<div class="split-location">
Singapore
USA
Aussie
</div>

在配置文件中，用户为每个地址输入回车，但问题是保存时，地址将在网页上显示为:

Singapore USA Aussie
<pre>Singapore</pre>
<pre>USA</pre>
<pre>Aussie</pre>

我不确定为什么文本 (Singapore USA Aussie) 仍然存在。只想显示:

<pre>Singapore</pre>
<pre>USA</pre>
<pre>Aussie</pre>

如何删除<pre>之前的第一行束？或者如何用 pre bunch 替换文本？

更新

还有一件事:如何在循环外打印第一个数组，因为需要先显示一个外部循环，然后将其余数组放在 Accordion 内？这里的代码是:让你明白我想做什么。看评论。

 var location = $('.split-locations');
    var split = $('.split-locations').text().split('\n');
    location.empty();
    //need to print first location

    location.append('<div class="accordion-location">');
    for (var i = 0; i < split.length; i++) {
      //print remaining location after minus first location
       location.append("<pre>"+split[i]+"</pre>");
    }
    location.append('</div>');
    });

Answer 1

您需要在附加 pre 节点之前清空容器元素。试试这个。

var split = $('.split-locations').text().split('\n');
$('.split-locations').empty();
for (var i = 0; i < split.length; i++) {
   $('.split-locations').append("<pre>"+split[i]+"</pre>");
}