使用JS或jQuery扩展两个容器

Question

我想用新版本更新容器而不替换它.例如:

Container1:

<div id="container-one">
    <p>
        <webview src="http://i.stack.imgur.com/Ed1aw.jpg"></webview>
    </p>
    <p>
       Text
    </p>
</div>

container2的:

<div id="container-two">
    <p>
        Cool intro
        <webview src="http://i.stack.imgur.com/Ed1aw.jpg"></webview>
    </p>
    <p>
       Long text
    </p>
    <p>
       New Paragraph with text in it.
    </p>
</div>

Container1更新:

<div id="container-one">
    <p>
        Cool intro
        <webview src="http://i.stack.imgur.com/Ed1aw.jpg"></webview>
    </p>
    <p>
       Long text
    </p>
    <p>
       New Paragraph with text in it.
    </p>
</div>

A Container1.innerHTML = Container2.innerHTML很简单,但我不想重新加载我的webview,因此代码应检测现有div中的新div或更新内容,并在Container1中应用修改.

更新:

Container2是用户编辑的container1的新版本,因此Container2可以包含任何内容:图像,链接,新段落.

我怎样才能做到这一点 ？

Answer 1

我可能没有正确理解你的问题，但是通过在你想要替换的文本中添加一个 id，并使用简单的 javascript，你可以实现这一点。

超文本标记语言

<div id="container-one">
    <p>
        <span id="inner-one-1"></span>
        <webview src="https://i.stack.imgur.com/Ed1aw.jpg"></webview>
    </p>
    <p>
       <span id="inner-one-2">Text</span>
    </p>
</div>

<div id="container-two">
    <p>
        <span id="inner-two-1">Cool intro</span>
        <webview src="https://i.stack.imgur.com/Ed1aw.jpg"></webview>
    </p>
    <p>
       <span id="inner-two-2">Long text</span>
    </p>
</div>

<button id="click">Click Me!</button>

JS

document.getElementById("click").onclick = function() {
    document.getElementById("inner-one-2").innerHTML = document.getElementById("inner-two-2").innerHTML;
    document.getElementById("inner-one-1").innerHTML = document.getElementById("inner-two-1").innerHTML;
}

演示在这里