javascript - javascript中的replaceWith问题

Question

<br class = "xyzzy" id = "printed">datasetName</br>

下面做。

$('#printed').replaceWith('<input class="form-control dataset-collection-on" id="create-dataset-name" type="text" placeholder="Enter dataset name"></input>')

结果是这样的。

<input class="form-control dataset-collection-on" id="create-dataset-name" type="text" placeholder="Enter dataset name"></input>
datasetName
<br>

如何摆脱 datasetName 和分支标签..？

标签： javascriptjqueryhtml

Answer 1

<br>是换行符，不能这样使用。改用 a div。

$('#printed').replaceWith('<input class="form-control dataset-collection-on" id="create-dataset-name" type="text" placeholder="Enter dataset name" />')

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div class="xyzzy" id="printed">datasetName</div>

更新：要在内容之前插入文本，可以使用prepend()

$('#printed').prepend('<input class="form-control dataset-collection-on" id="create-dataset-name" type="text" placeholder="Enter dataset name" /> <br>')

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div class="xyzzy" id="printed">datasetName</div>