时间戳

首页 > 解决方案 > 克隆并用新添加的元素及其克隆内容替换自身

html - 克隆并用新添加的元素及其克隆内容替换自身

问题描述

我正在尝试执行以下操作；

(1) 克隆元素。

(2) 创建一个新元素并与克隆的元素连接。

(3) 将克隆的元素替换为新元素。

var clonedElement = $('.container input#input_text').clone();
    
$(".container input#input_text").replaceWith('<div class="custom-container"><p class="custom-text">Some Text</p>' + clonedElement + '</div>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
<!-- Some auto generated element -->
<!-- Some auto generated element -->
<form>
<!-- Some auto generated element -->
<input id="input_text" />
<!-- Some auto generated element -->
</form>
<!-- Some auto generated element -->
<!-- Some auto generated element -->
</div>

克隆的不会转换回其原始元素，它只是对象。

标签： htmljquery

解决方案

您可以append将克隆的元素复制到新元素div，然后将元素的内容替换为：

var clonedElement = $('.container input#input_text').clone();

$(".container input#input_text")
    .replaceWith($('<div class="custom-container"><p class="custom-text">Some Text</p></div>')
                     .append(clonedElement));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <!-- Some auto generated element -->
  <!-- Some auto generated element -->
  <form>
    <!-- Some auto generated element -->
    <input id="input_text" />
    <!-- Some auto generated element -->
  </form>
  <!-- Some auto generated element -->
  <!-- Some auto generated element -->
</div>

推荐阅读