Javascript 在UI上重新定位动态呈现的元素

我正在建立一个角度反应形式。我正在拉入一个api并使用

*ngFor

在我的元素中循环

我已经渲染了3个单选按钮。如果选择“是”单选按钮，则会显示一个附加文本框，并在选择其他单选按钮时再次隐藏

问题是，我希望文本框显示在单选按钮的正下方，但由于它们是动态的，因此它们都共享文本框前面的相同div位置

e、 g

期望的结果

<div><input type="radio" value="yes" /><div>
 <textarea />
<div><input type="radio" value="no"/><div>
<div><input type="radio" value="maybe"/><div>

有没有任何方法可以操纵dom以获得所需的效果

---

下面是一个StackBlitz示例-

您可以尝试使用CSS直观地排列元素。例如，如果使用父项上的

display:grid

定位单选按钮，则可以在子项上设置

顺序：

，以更改元素的显示顺序。

    <div class="form-check-inline" *ngFor="let item of personal.radioButtonsdata">
        <label for="{{item.section}}" class="col-12 customradio"
            ><span>{{item.section}}</span>
            <input [value]="item" id="{{item.section}}" type="radio" formControlName="selectedButton"/>
            <span class="checkmark"></span>
        </label>
        <div class="col-md-8" *ngIf="form.get('radioButtonsGroup.selectedButton').value.section === 'yes' && item.section === 'yes'">
          <div class="col-md-8" >
                <input type="text" formControlName="title"   class="form-control" placeholder="Title">
        </div>
       </div>
      </div>
    `

{{item.section}
`

---

您可以在循环内检查item.section是否为“yes”，以及是否选择了yes值。stackblitz链接：

现场！！谢谢你，朋友

    <div class="form-check-inline" *ngFor="let item of personal.radioButtonsdata">
        <label for="{{item.section}}" class="col-12 customradio"
            ><span>{{item.section}}</span>
            <input [value]="item" id="{{item.section}}" type="radio" formControlName="selectedButton"/>
            <span class="checkmark"></span>
        </label>
        <div class="col-md-8" *ngIf="form.get('radioButtonsGroup.selectedButton').value.section === 'yes' && item.section === 'yes'">
          <div class="col-md-8" >
                <input type="text" formControlName="title"   class="form-control" placeholder="Title">
        </div>
       </div>
      </div>
    `