使用jquery在父标记之外附加html

Question

所以我有这个场景

<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 />');

我想这样做是因为div替换tmp.mention在div编辑器中具有contenteditable设置为false，该编辑器具有contenteditable设置为true。如果没有，用户将无法在div之后输入...

Answer 1

试试这个：

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

我认为你需要

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

DEMO

但是如果你想整个#editor那么

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

<强> DEMO

根据编辑

如果您想要输出

<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>');

Answer 2

试试这个：

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