jQuery replaceWith 填充原始 HTML 而不是替换为新标签：我该如何解决这个问题？

Question

我正在尝试使用 jQuery replaceWith() 将文本输入替换为 div 元素。我们的想法是让这发生在与相应文本输入相同的 DOM 位置。页面如下：

HTML（仅适用部分）：

<input type='text' placeholder='Test...' name='txtTest' id='txtTest'>

JavaScript:

$(document).ready(function() {
  var inText = $("input[type='text']");
  
  inText.each( function(index) {
    var item = inText[index];
    item.replaceWith(("<div class='in-text'></div>"));
  });
});

输出：

在开发人员工具中单步执行时，它从文本输入正确开始，然后清除文本输入并替换为原始 HTML 文本而不是新节点。

我觉得我遗漏或误解了什么，但我找不到具体是什么。

Answer 1

您正在使用 .replaceWith() 的 javascript 版本，您需要在项目

中添加 $()

$(item).replaceWith(("<div class='in-text'></div>"));

试试这个：

$(document).ready(function () {
  var inText = $("input[type='text']");

  inText.each(function (index) {
     var item = inText[index];
     $(item).replaceWith(("<div class='in-text'></div>"));
  });

});

Answer 2

您需要使用带回调的语法。

inText.replaceWith(function() {
    return "<div class='in-text'></div>"
});

Answer 3

您需要实际创建要添加的元素。目前，您只是添加恰好像元素一样编码的文本，但它只是将其解释为文本。因此，首先创建新元素，然后将 class 添加到该元素，然后使用 replaceWith 将元素与新元素交换：

$(document).ready(function() {
  var inText = $("input[type='text']");

  inText.each(function(index) {
    var item = inText[index];
    var newDiv = document.createElement("DIV");
    newDiv.classList.add("in-text");
    newDiv.innerHTML = "New DIV added";
    item.replaceWith(newDiv);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' placeholder='Test...' name='txtTest' id='txtTest'>

jQuery replaceWith 填充原始 HTML 而不是替换为新标签：我该如何解决这个问题？

jQuery replaceWith fills in raw HTML instead of replacing with new tag: How do I fix this?

html

javascript

jquery

replacewith