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

Question

So I have this scenario

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

I want to call

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

The problem is I want the output to be like this:

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

I tried the following and it didn't work: (Where this is the div replacing tmp.mention)

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

I want to do this because the div replacing tmp.mention has contenteditable set to false inside a div editor that has a contenteditable set to true. If there's no
the user will not be able to type after the div...

Answer 1

Try this:

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

I think you need

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

DEMO

But if you want to whole #editor then

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

DEMO

According to edit

If you want output like

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

then try

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