заменить с проблемами в JavaScript

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 и тега ветвления ..?

Answer 1

<br> является разрывом строки и не должен использоваться таким образом. Вместо этого используйте 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>