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

【问题标题】：jQuery replaceWith fills in raw HTML instead of replacing with new tag: How do I fix this?jQuery replaceWith 填充原始 HTML 而不是用新标签替换：我该如何解决这个问题？
【发布时间】：2020-06-24 09:42:08
【问题描述】：

我正在尝试使用 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 文本而不是新节点。

我觉得我遗漏或误解了某些东西，但我找不到它到底是什么。

【问题讨论】：

标签： javascript html jquery replacewith

【解决方案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>"));
  });

});

【讨论】：

【解决方案2】：

你需要使用带有回调的语法。

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

【讨论】：

【解决方案3】：

您需要实际创建要添加的元素。目前，您只是添加恰好编码为元素的文本，但它仅将其解释为文本。所以，首先创建新元素，然后将你的类添加到元素中，然后使用 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'>

【讨论】：