Question

我们如何更改v2 div中存在的p标签的值？

<div id="v1">
<div id="flow">
    <p id="content">Hello</p>
</div>
</div>
<div id="v2">
<div id="flow">
    <p id="content">Hello</p>
</div>
</div>

Answer 1

对每个id使用唯一的p，并在innerHTML之间进行切换

var c1=document.getElementById("content1").innerHTML;
var c2=document.getElementById("content2").innerHTML;

document.getElementById("content1").innerHTML = c2;
document.getElementById("content2").innerHTML = c1;

<div id="v1">
<div class="flow">
    <p id="content1">Hello</p>
</div>
</div>
<div id="v2">
<div class="flow">
    <p id="content2">Hello of 2</p>
</div>
</div>

Answer 2

这里。是的，ID应该是唯一的。

document.querySelector('#v2 div p').innerHTML = 'changed';

<div id="v1">
<div id="flow">
    <p id="content">Hello</p>
</div>
</div>
<div id="v2">
<div id="flow">
    <p id="content">Hello</p>
</div>
</div>

Answer 3

这是无效的语法，因此通常建议在页面上多次使用一个ID，但这是您的处理方式：

<div id="v1">
    <div id="flow">
        <p id="content">Hello</p>
    </div>
</div>
<div id="v2">
    <div id="flow">
        <p id="content">Hello</p>
    </div>
</div>

document.getElementById("v2").getElementById("content").innerText = "Some new text";

Answer 4

首先，从您的代码中删除重复的id。带页面的两个元素都不应具有相同的id。如果要在同一组中包含多个元素，可以使用class属性。有关更多详细信息，请参见this帖子。
第二，使用querySelector()方法获取对所需元素的引用，并使用您要添加的内容覆盖其textContent属性。

let para = document.querySelector('#v2 p.content');

para.textContent = 'World';

<div id="v1">
  <div class="flow">
      <p class="content">Hello</p>
  </div>
</div>
<div id="v2">
  <div class="flow">
      <p class="content">Hello</p>
  </div>
</div>

参考：

Answer 5

<div id="v1">
<div id="flow">
    <p id="content">Hello</p>
</div>
</div>
<div id="v2">
<div id="flow">
    <p id="content">Hello</p>
</div>
</div>

这将适用于v2 div中的所有p和嵌套p。

   <script>
traverse=(node)=>{
      for(let i=0;i<node.childElementCount;i++){
          if(node.children[i].nodeName=="p"){
            node.children[i].innerHTML=`Your HTML`;
          }
          if(node.children[i].childElementCount>0)
          {
              traverse(node.children[i]);
          }

      }
    }
    traverse(document.getElementById("v2"));
</script>

我们如何更改v2 div中存在的p标签的值？

5 个答案: