jQuery - 在 HTML 字符串的元素内插入文本

Question

我将一个 html 字符串存储到 var HTML 中，我使用以下内容获得：

var HTML = $('.group').get(0).outerHTML;

使用 console.log(HTML) 的 HTML 输出是：

<div class="group">
    <div class="class1">
        Data123...
    </div>
    <div class="class2">
        <!--I want to insert text here -->
    </div>
</div>

现在，我想在 div class="class2" 中插入一些文本。我正在使用以下代码：

$(HTML).find('.class2').text("Hello!");

但是现在使用 console.log(HTML) 输出的 HTML 和以前一样。文字“你好！”没有被插入。谁能帮忙解决一下。

完整代码如下：

<div class="group">
    <div class="class1">
        Data123...
    </div>
    <div class="class2">
        
    </div>
</div>

<script type="text/javascript">
var HTML = $('.group').get(0).outerHTML;
$(HTML).find('.class2').text("Hello!");
console.log(HTML);
</script>

Answer 1

您正在更新一个临时 DOM 元素，但这不会更改 HTML 字符串。您需要将 DOM 元素保存在变量中。

var new_div = $(HTML);
new_div.find('.class2').text("Hello!");
console.log($(new_div).html());