“replaceWith”不改变内容

Question

以下代码中使用的指令replaceWith仅更改目标内容一次。如果我发送任何其他对象，则警报显示正确的值，但不显示div。

    function identify (thisobj) {
        alert(thisobj.value);
        $("#test").replaceWith(thisobj.value);
    }

目标元素如下所示。

    <div id="canvas_container">
        <div id="test">This is a test</div>
    </div>

这里传递了各种对象，每个对象都有不同的值。但是虽然Alert（）反映了正确的内容，但#Test只允许一次更改，然后它会永久保留该值。

Answer 1

您正在用新元素替换#test。它将无法再次工作，除非您替换它的元素也匹配该选择器。

来自jQuery docs：

  

.replaceWith（）方法从DOM中删除内容并插入新内容   通过一次通话即可获得内容。

假设您要保留#test元素，可以使用html方法替换它的内容，而不是元素本身。

Answer 2

.replaceWith()替换整个DOM节点;您应该使用.html(thisobj.value)或.text(thisobj.value)

Answer 3

您误解了replaceWith的使用：它取代了您调用它的元素，因此在首次使用后，不再有元素#test。

您需要text或html：

$("#test").text(thisobj.value);

如果您的值包含html，请使用：

$("#test").html(thisobj.value);

Answer 4

replaceWith删除#test元素并将其替换为您设置的内容（thisobj.value）。

要替换元素的内容，请使用.html()（或.text()）。

function identify (thisobj) {
    alert(thisobj.value);
    $("#test").html(thisobj.value);
}

Answer 5

replaceWith将替换整个元素，替换#test中的内容，使用：

$("#test").html(thisobj.value);

Answer 6

您是否研究过jQuery的text（）函数？如果没有，http://api.jquery.com/text/

替换文字可能会有所帮助