javascript - 在v2中,我们如何改变p 标记的值

  显示原文与译文双语对照的内容
150 4

我们如何在 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>
时间:原作者:0个回答

115 3
  • 首先,从代码中删除重复的id没有两个元素withing页面应该具有相同的id如果希望在同一组中包含多个元素,则可以使用 class 属性。有关更详细的信息,请参见
  • 其次,使用 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>

引用:

原作者:
119 3

对每个 p 使用唯一的id,并在 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>
原作者:
118 5

这里是的而且是唯一的。

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>
原作者:
51 1

它是无效语法,因此通常建议不要在页面上使用多个 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";
原作者:
...