使用 jQuery 将 HTML 附加到父标记之外

append html outside of the parent tag using jquery

本文关键字：jQuery HTML 使用      更新时间：2023-09-26

所以我有这个场景

<div id="editor" contenteditable="true">
    <div id="list">Hello</div>
</div>

我想打电话 

var html = $('<div id="replaced" contenteditable="false">Hello</div>');
$('#list').replaceWith(html);

问题是我希望输出是这样的：

<div id="editor" contenteditable="true">
    <div id="replaced" contenteditable="false">Hello</div><br />
</div>

我尝试了以下方法，但没有奏效：（这是替换 tmp.mention 的div）

$('#'+tmp.mention).replaceWith(this).parent().after('<br />');

我想这样做是因为替换 tmp.mention 的div 在将内容可编辑设置为 true 的div 编辑器中将内容可编辑设置为 false。如果没有
则用户将无法在div 之后键入...

试试这个：

$('#'+tmp.mention).replaceWith($(this).parent()).after('<br />');

我认为你需要

var html = $('<div id="replaced" contenteditable=false>Hello</div>');
$('#list').replaceWith(html);

演示

但是如果你想整#editor那么

var html = $('<div id="replaced" contenteditable=false>Hello</div>');
$('#list').parent().replaceWith(html);

演示

根据编辑

如果你想要输出这样的

<div id="editor" contenteditable="true">
    <div id="replaced" contenteditable="false">Hello</div><br />
</div

然后尝试

var html = $('<div id="replaced" contenteditable=false>Hello</div>');
$('#list').replaceWith(html).after('</br>');

试试这个：

$('#list').replaceWith('<div id="replaced" contenteditable="false">Hello</div><br />')
相关文章：