javascript - 使用 JS 或 jQuery 区分两个容器

Question

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

容器 1:

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

容器 2:

<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，您可以实现这一点。

HTML

<div id="container-one">
    <p>
        <span id="inner-one-1"></span>
        <webview src="http://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="http://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;
}

DEMO HERE