使用标记脚本复制 HTML 块

copy html block with tags script

本文关键字：复制 HTML 脚本      更新时间：2023-09-26

我有这样的html代码：

<div> 
    <div id="text">text></div>
    <script>$("#text").val('some value');</script>
</div>

我通过.clone()复制此html并在其中编辑html。结果：

<div> 
    <div id="1-text">text></div>
    <script>$("#text").val('some value');</script>
</div>

我想更改标签脚本中的 id。 $("#1-text").val('other value');我该怎么做？

您可以简单地在外部添加一个变量，该变量动态地告诉您要选择的内容。 因此，如果要使用循环遍历值，则可以执行以下操作：

$("#text_"+i).val('other value');

您还可以设置一个计数器，并在添加新的div 时增加 i 增量。所以它是灵活的。

我不确定你的最终目标是什么，但如果你试图在<script>标签中操作javascript，我不推荐这种方法。因为我认为这会很麻烦。

如果你想复制整个 html 块，你应该将你的内联 javascript 代码作为容器绑定到这个块。不是同上。因此，当您移动或复制块时，您的脚本将能够找到与容器相关的任何元素。

<div id="containerOne" class="js-container">
    <div class="js-text" data-text="some value">some value</div>
    <script>
        var $el = $("script").last().closest(".js-container").find(".js-text");
        $el.text($el.data("text"));
    </script>
</div>

请注意，使用"js-"前缀仅用于javascript操作，而不是用于css样式。

此外，您不需要更改脚本本身。您可以通过"data-"属性更改值。

在外部脚本中，您可以通过各种方法封装任何克隆逻辑。例如：

var myModule = {
  clone: function(containerSelector) {
    var $donorEl = $(containerSelector);
    var $donorScript = $donorEl.find('script');
    $script = $("<script />");
    $script.text($donorScript.text());
    $recipientEl = $donorEl.clone();
    $recipientEl.attr('id', 'containerTwo');
    var newValue = 'other value';
    $('.js-text', $recipientEl).data('text', newValue);
    $('body').append($recipientEl);
    $('script', $recipientEl).replaceWith($script);
  }
};
myModule.clone('#containerOne');

您可以看到工作示例。

相关文章：