用新的DOM元素替换(）任意文本

.replace() arbitrary text with new DOM Element

本文关键字：任意 文本 替换 元素 DOM      更新时间：2023-09-26

我在div中有一块未标记的文本。我想解析文本，并用包含处理程序的新表单元素替换某些关键字。一个例子是，当我看到文本"Date:________"时，我想用一个新的输入字段替换它，给它一个唯一的id，然后给它附加一个.datepicker（）处理程序。

给定示例文本：

*Lorem ipsum dolor坐amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。日期：________ Ut enim ad minim veniam，quis nostrud exerciation ullamco labours nisi Ut aliquip ex ea commodo consequat。*

我尝试过以下几种：

$("#textdiv").replace(/Date:________/g, "<input type='text' id='textid_123'/>");  
$("#textid_123").datepicker();

当它创建输入框时，它不附加datepicker（）处理程序。这并没有让我感到惊讶，我猜JQuery并没有意识到DOM的修改。

如果我的"Date"被包装在一个或另一个标签中，这将是微不足道的。有没有办法用JQuery可见的新DOM元素替换纯文本？

Uncaught TypeError: $(...).replace is not a function。

您应该替换元素的innerHTML，如下所示：

$("#textdiv").html( 
   $("#textdiv").html().replace(/Date:________/g, "<input type='text' id='textid_123'/>") 
); 
console.log( $('#textid_123') );  // yup, it's there, so .datepicker should work

BTW：您在正则表达式中使用/g标志，这意味着您希望替换多个Date: ___实例。在这种情况下，您不应该在新的输入元素上使用硬编码的id，因为id必须是唯一的。

http://jsfiddle.net/hfxvoL56/

问题不在于jQuery没有接收到内容更改，因为内容在.datepicker调用之前已经更改。问题是.replace()不是一个有效的jQuery方法。相反，替换HTML内容如下：

var content = $("#textdiv").html().replace(/Date:________/g, "<input type='text' id='textid_123'/>");
$("#textdiv").html(content);

然后您可以调用其他方法。示例JSFiddle

相关文章：