Question

我有这个角度脚本来构建一个div。我遇到的问题是它将.text附加到i标签内而不是作为i的兄弟。

希望这是有道理的。

            var body = placeWrapper
                .append('div')
                .attr('class', 'thm-listing__body');

                body.append('span')
                .attr('class', 'thm-listing__location')
                .append('i')
                .attr('class', 'fa fa-map-marker')
                .text(function (d) {
                    return d.Address;
                });

这次潜水假设如下：

<div class="thm-listing__body">
<span class="thm-listing__location">
<i class="fa fa-map-marker"></i>
The text here
</span>
</div>

但它目前呈现出来：

<div class="thm-listing__body">
<span class="thm-listing__location">
<i class="fa fa-map-marker">The text here</i>
</span>
</div>

Answer 1

您正在设置text至i代码，并且您需要一个跨度右侧的文字，因此请在追加范围之后设置文字，而不是在追加i之后设置文字

    var body = placeWrapper
        .append('div')
        .attr('class', 'thm-listing__body');

        body.append('span')
        .attr('class', 'thm-listing__location')
        .text(function (d) {
            return d.Address;
        })
        .append('i')
        .attr('class', 'fa fa-map-marker');

<强>更新

在跨文本使用prepend()之前设置图标，如下所示

var body = placeWrapper
            .append('div')
            .attr('class', 'thm-listing__body');

            body.append('span')
            .attr('class', 'thm-listing__location')
            .text(function (d) {
                return d.Address;
            })
            .prepend('i')
            .attr('class', 'fa fa-map-marker');

追加＆＃34;我＆＃34;标签加上要跨越的文本

1 个答案: