Javascript 使用JS或jQuery区分两个容器

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

集装箱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>

酷的介绍


长文本


新段落中有文本。

一个

Container1.innerHTML=Container2.innerHTML

将很简单，但我不想重新加载我的webview，因此代码应该检测现有div中的新div或更新内容，并在Container1中应用修改

更新：

---

Container2是由用户编辑的container1的新版本，因此Container2可以包含任何内容：图像、链接、新段落

---

我该怎么做？

我可能没有正确理解您的问题，但通过向要替换的文本中添加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>

---

尝试一下，看看这是否适合您

var first = $('container-one p:first');
first.html($('container-two p:first').html() + first.html());

$('container-one p:last').html($('container-two p:last').html());

---

您需要获取文本节点并替换内容，如

$('button').on('click', function () {
    // this block is for not to update the webview
    // get the first text node
    var txt = $('#container-one > p:first').contents().first().get(0);

    if (txt.nodeType === 3) { // Node.TEXT_NODE
        txt.nodeValue = $('#container-two > p:first').text();
    }

    // update rest of the elements
    $('#container-two').children().each(function (i) {
        if (i !== 0 && $('#container-one').children()[i]) {
            $($('#container-one').children()[i]).html($(this).html());
        }
        if (!$('#container-one').children()[i]) {
            $('#container-one').append($(this).clone());
        }
    });
});

请试一试

var container_one = $("#container-one").children();
var container_two = $("#container-two").children();


$.each(container_one, function(index, element){
  var cont_one_html = $(this).html();
  var cont_two_html = $(container_two[index]).html();
  if(cont_one_html != cont_two_html){
    $(this).html(cont_two_html);
  }
});

请查看图像以了解更多信息。

使用此选项：

function update(s){
   document.getElementById("container-one").innerHTML=s.innerHTML;
}

setInterval(function(){
   update(document.getElementById("container-two"));
},1000);

它的作用是每秒更新一次内容

为了显示它可以处理动态内容，我将第二个div设置为可编辑

---

演示：

为什么不把文本包装到id容器（div、span等）中，然后这样做呢？但你在问题中说段落是文本。。。我是不是误解了什么。。。？看一看我的答案…我更新了我的问题的更多细节，这不是我想要的答案，但谢谢你的帮助。所以你只想在第一段中添加文本，但替换第二段？Container2是由用户编辑的container1的新版本，所以Container2可以包含任何内容：图像、链接、新段落。还有。。。？我的代码有什么问题，你不想做的是什么？使用id似乎是一种非常肮脏的方式，但使用容器的子级解决方案会更好。Container2是由用户编辑的container1的新版本，因此Container2可以包含任何内容：图像、链接、新段落。它根本不是静态的。

html（）

将接受任何内容，只要它在p元素中接收。例如：如果用户添加新段落，则代码不会修改第二段，即使它有新内容。您的代码处理新内容的特定配置，这就是问题所在（很抱歉，我的问题一开始就不清楚）。这个答案也是静态的，如果Container2有四个段落呢？@armandG。看到我的更新代码，希望这是你正在寻找的这是伟大的！唯一的问题是，如果用户更改了段落中的某些内容，它将被更新，即使段落中的webview没有更改。它能与children（）一起工作吗？children（）更聪明吗？确切地说，这段代码不起作用，您必须更新这段代码的某些部分。我无法理解你的想法。如果你只提供你的代码，那么我可以帮助你。

function update(s){
   document.getElementById("container-one").innerHTML=s.innerHTML;
}

setInterval(function(){
   update(document.getElementById("container-two"));
},1000);